Salesforce Visualforce CSS固定div

Question

カスタムアナリティクスページを構築し、Salesforce1のネイティブアクションバーのUIを複製しています。意図は、アクションバーを画面の下部に固定しておくことです。 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; 
} 

ブートストラップ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ファイルを使用して（それらをソースに直接！）、サイズで表示されます、私は透明な左上のエッジだけが表示されます。私はそれからサイズを設定しなければならない。その後、正常に動作します。

2番目の問題は、使用しています<use xlink:href="myicon.svg"></use>外部リソース方法は、Internet ExplorerとSafariのどのバージョン（最大11個のテスト済み）でも動作しません。あなたはこれをpolyfillする必要があります。このpolyfill jonathantneal/svg4everybodyを使用することができます。