2016-04-07 15 views
0

Seltsames Problem ... in Safari, Opera, FF, IE getestet und alle scheinen gut - das erste Mal um ehrlich zu sein, ich hatte ein Problem mit Chrome allein!Chrome Problem: Font super in ul li pausen Polsterung

Fundament 6 Rahmen.

In meinem Top-Nav, ein Element hat einen Hintergrund und font awesome Symbol.

Irgendwelche Ideen? Vielen Dank im Voraus.

FF example Chrome Example

HTML:

<div class="title-bar"> 
 
    <div class="title-bar-left"> 
 
     <span class="title-bar-title"><img src="{$ThemeDir}/images/logoNav.png" alt="$SiteConfig.Title"/></span> 
 
    </div> 
 
    <div class="title-bar-right"> 
 
     <ul class="large-horizontal main-menu"> 
 
      <% loop Menu(1) %> 
 
      <li class="menu-item<% if $LinkingMode == "current" || $LinkingMode == "section" %> active<% end_if %>"> 
 
       <a href="$Link" title="Go to $Title.ATT">$MenuTitle</a> 
 
       <% if $Children %> 
 
       <ul class="sub-menu"> 
 
        <% loop $Children %> 
 
        <li class="<% if $LinkingMode == "current" || $LinkingMode == "section" %>active<% end_if %>"> 
 
         <a href="$Link" title="Go to $Title.ATT"> $MenuTitle</a> 
 
        </li> 
 
        <% end_loop %> 
 
       </ul> 
 
       <% end_if %> 
 
      </li> 
 
      <% end_loop %> 
 
      <li class="menu-item client-login"><a href="#" class="client-login-button" title="Go go Client Login">Client Login <i class="fa fa-users"></i></a></li> 
 
     </ul> 
 

 
     <button class="menu-icon" type="button" data-open="offCanvas"></button> 
 
    </div> 
 
</div>

SASS:

// custom menu button 
 

 
li.menu-item.client-login{ 
 
\t position: relative; 
 
\t background-color: rgba(8,79,123,0.7); 
 
\t -webkit-box-shadow: 1px 1px 3px 0 #3b3b3b; 
 
\t padding: 1.2rem; 
 
\t padding-top: 5rem; 
 
\t box-shadow: 1px 1px 3px 0 #3b3b3b; 
 
\t border-radius: 0 0 0.5rem 0.5rem; 
 
\t @include transition(background-color 0.3s ease); 
 
\t &:hover{ 
 
\t \t background-color: rgba(8,79,123,1); 
 
\t } 
 

 
\t a{ 
 
\t \t color: #fff; 
 
\t \t font-weight: 600; 
 
\t } 
 
} 
 

 
.main-menu li.menu-item.client-login a{ 
 

 
\t color: $white; 
 
\t font-weight: 600; 
 
\t &:hover{ 
 
\t \t color:$white; 
 
\t } \t 
 
\t 
 
}

Antwort

0

Können Sie die Antwort:

Font ehrfürchtigen hat display:inline-block; auf dem i-Elemente.

Eine einfache Überschreibung display:inline; war alles, was

0

Verwendung CDN anstelle des Speicherns die Datei lokal auf Ihrem Projekt erforderlich war, und stellen Sie sicher, dass Sie jquery vor fontawesome CDN zu Ihrem Projekt einschließlich