Salesforce Visualforce CSS Исправлено div

Question

Я создаю страницу пользовательской аналитики и реплицирую пользовательский интерфейс собственной панели действий в Salesforce1. Цель состоит в том, чтобы удерживать панель действий в нижней части экрана. Кажется, он отлично работает в Android-браузере и мобильном эмуляторе, но не в приложении iOS.

CSS

#dashboard-utility-banner{ 
    border-top:1px solid #999; 
    background-color:#eeeeee; 
    position:fixed; 
    bottom:0px; 
    height:74px; 
} 

#dashboard-utility-banner .utility-tools{ 
    text-align: center; 
    font-size: 11px; 
} 

Bootstrap HTML

<div id="dashboard-utility-banner" class=" col-md-12 col-xs-12"> 
    <div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" > 
    <a href="#" onClick="createNote();return false;"> 
     <span class="slds-icon_container slds-icon_container--circle slds-icon-standard-performance"> 
     <svg aria-hidden="true" class="slds-icon slds-icon--small"> 
      <use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#note')}"></use> 
     </svg> 
    </span><br/><span class="">Create Note</span> 
    </a> 
    </div>  
    <div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" > 
    <a href="#" onClick="showPriceList();return false;"> 
     <span class="slds-icon_container slds-icon_container--circle slds-icon-standard-topic"> 
      <svg aria-hidden="true" class="slds-icon slds-icon--small"> 
       <use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#cases')}"></use> 
      </svg> 
     </span><br/><span class="">Price List</span> 
    </a>  
    </div> 
    <div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" > 
    <a href="/apex/displaySiteAccounts?accountNumber={!accountNumber}&id={!accountID}"> 
     <span class="slds-icon_container slds-icon_container--circle slds-icon-standard-account"> 
      <svg aria-hidden="true" class="slds-icon slds-icon--small"> 
       <use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#company')}"></use> 
       </svg> 
    </span><br/><span class="">Locations</span> 
    </a> 
    </div>  
</div> 

Answer 1

Это не легко воспроизвести вашу проблему. Даже вы не указали, какова ваша проблема. Используя ваш источник, укажите мне 2 вопроса.

Прежде всего, вы не указали какие-либо размеры вашего элемента svg. Поэтому, используя некоторые примеры svg-файлов (включая их прямо к источнику!), Будет отображаться размером, я вижу только прозрачный верхний левый край. Тогда я должен установить размер. Тогда он работает нормально.

Вторая проблема, с которой вы сталкиваетесь, использует <use xlink:href="myicon.svg"></use> Внешний ресурс не работает в любой версии (до 11 протестированных) Internet Explorer и сафари. Вам нужно полифовать это. Вы можете использовать этот полипол jonathantneal/svg4everybody.