Salesforce Visualforce CSS固定div

我正在構建自定義分析頁面並複製Salesforce1中的本機操作欄的UI。其目的是將操作欄固定在屏幕的底部。它似乎在Android和瀏覽器移動模擬器中運行良好，但在iOS應用程序中卻不行。Salesforce Visualforce CSS固定div

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; 
}

引導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>

來源

2016-04-29 Alen Giliana

這是不容易重現您的問題。即使你沒有具體說明你的問題。使用你的源代碼向我展示2個問題。

首先你沒有提供任何尺寸到你的svg元素。因此，使用一些示例svg文件（包括它們直接指向源代碼！）將以尺寸顯示，我只能看到透明的左上角。我必須設定大小。然後它工作正常。

第二個問題是使用<use xlink:href="myicon.svg"></use>外部資源方式在任何版本（最多11個測試）的Internet Explorer和Safari瀏覽器中都不起作用。你需要填充這個。你可以使用這個polyfill jonathantneal/svg4everybody。

來源

2016-04-29 06:58:02

我添加了一些關於操作欄的更多細節。關於瀏覽器兼容性，該頁面只能通過iOS查看。此外，svg大小來自Salesforce Lightning體驗CSS庫。（注意容器上的類）。 https://www.lightningdesignsystem.com/components/icons/ –

Salesforce Visualforce CSS固定div

回答

相關問題