我在Safari瀏覽器中的大型菜單與Firefox和Chrome不一樣..奇怪的CSS行爲？

Question

Safari顯示重疊文本...我不知道Safari中會發生什麼。 firefox和chrome沒有重疊文本。

這裏是我的截圖：

野生動物園：

火狐：

請使用Safari的測試結果。我認爲這與我的CSS有衝突嗎？ jQuery的不應該是一個問題

//START MEGA MENU JQUERY 
 
jQuery(document).ready(function($){ 
 
\t 
 
    //on mobile - open submenu 
 
\t $('.has-children').children('a').on('click', function(event){ 
 
\t \t //prevent default clicking on direct children of .has-children 
 
\t \t event.preventDefault(); 
 
\t \t var selected = $(this); 
 
\t \t selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out'); 
 
\t }); 
 

 
\t 
 
\t $('.lg-dropdown-content').menuAim({ 
 
\t \t activate: function(row) { 
 
\t \t \t $(row).children().addClass('is-active').removeClass('fade-out'); 
 
\t \t \t if($('.lg-dropdown-content .fade-in').length == 0) $(row).children('ul').addClass('fade-in'); 
 
\t \t }, 
 
\t \t deactivate: function(row) { 
 
\t \t \t $(row).children().removeClass('is-active'); 
 
\t \t \t if($('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row))) { 
 
\t \t \t \t $('.lg-dropdown-content').find('.fade-in').removeClass('fade-in'); 
 
\t \t \t \t $(row).children('ul').addClass('fade-out') 
 
\t \t \t } 
 
\t \t }, 
 
\t \t exitMenu: function() { 
 
\t \t \t $('.lg-dropdown-content').find('.is-active').removeClass('is-active'); 
 
\t \t \t return true; 
 
\t \t }, 
 
\t }); 
 

 

 
\t //submenu items - go back link 
 
\t $('.go-back').on('click', function(){ 
 
\t \t var selected = $(this), 
 
\t \t \t visibleNav = $(this).parent('ul').parent('.has-children').parent('ul'); 
 
\t \t selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out'); 
 
\t }); 
 

 

 
});

/* BASIC style for nav, you can ingore this part */ 
 
a:focus { 
 
    text-decoration:none; 
 
} 
 

 
a { 
 
    transition: all 0.3s ease 0s; 
 
    text-decoration:none; 
 
} 
 

 
a:hover { 
 
    color: #5ad5f4; 
 
    text-decoration: none; 
 
} 
 

 
a:active, a:hover { 
 
    outline: 0 none; 
 
} 
 

 
ul{ 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
.lg-dropdown-content { 
 
    background-color: #ddd; 
 
} 
 

 
/* END BASIC style for nav, you can ingore this part */ 
 

 

 
/* START MEGA MENU CSS */ 
 

 
.back-width { 
 
    width: 100%; 
 
} 
 

 
ul.column-two { 
 
    column-count: 2; 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
} 
 

 
.minheight2{ 
 
    min-height:0px; 
 
} 
 

 
.lg-dropdown h2, 
 
.lg-dropdown-content a, 
 
.lg-dropdown-content ul a { 
 
    height: 50px; 
 
    line-height: 50px; 
 
    padding: 0 20px; 
 
} 
 

 

 
.lg-dropdown { 
 
    margin-top: 15px; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #111433; 
 
    color: #ffffff; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    height: auto; 
 
    -webkit-transform: translateX(0); 
 
    -moz-transform: translateX(0); 
 
    -ms-transform: translateX(0); 
 
    -o-transform: translateX(0); 
 
    transform: translateX(0); 
 
    background-color: transparent; 
 
    color: #111433; 
 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
 
    opacity: 0; 
 
    -webkit-transform: translateY(30px); 
 
    -moz-transform: translateY(30px); 
 
    -ms-transform: translateY(30px); 
 
    -o-transform: translateY(30px); 
 
    transform: translateY(30px); 
 
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; 
 
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; 
 
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; 
 
} 
 

 
.lg-dropdown.dropdown-is-active { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0); 
 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    -o-transform: translateY(0); 
 
    transform: translateY(0); 
 
    -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s; 
 
    -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s; 
 
    transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s; 
 
} 
 

 

 
.lg-dropdown-content > li{ 
 
    display: inline-block; 
 
} 
 

 

 
.lg-dropdown-content, .lg-dropdown-content ul { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    padding-top: 0; 
 
    overflow: visible; 
 
    -webkit-transition: -webkit-transform 0.3s; 
 
    -moz-transition: -moz-transform 0.3s; 
 
    transition: transform 0.3s; 
 
} 
 

 
.lg-dropdown-content a { 
 
    display: block; 
 
    color: #000; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.5rem; 
 
    /* truncate text with ellipsis if too long */ 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    border-top-width: 1px; 
 
    border-style: solid; 
 
    border-color: #ebebeb; 
 
    border:none; 
 
    /* Force Hardware Acceleration */ 
 
    -webkit-transform: translateZ(0); 
 
    -moz-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    -o-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 
 
    -moz-transition: opacity 0.3s, -moz-transform 0.3s; 
 
    transition: opacity 0.3s, transform 0.3s; 
 
} 
 

 
.lg-dropdown-content ul a { 
 
    display: block; 
 
    color: #111433; 
 
    /* truncate text with ellipsis if too long */ 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    border-top-width: 1px; 
 
    border-color: #242643; 
 
    border-style: solid; 
 
    border:none; 
 
    /* Force Hardware Acceleration */ 
 
    -webkit-transform: translateZ(0); 
 
    -moz-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    -o-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 
 
    -moz-transition: opacity 0.3s, -moz-transform 0.3s; 
 
} 
 

 

 
.lg-dropdown-content.is-hidden > li > a, .lg-dropdown-content.move-out > li > a, .lg-dropdown-content ul.is-hidden > li > a, .lg-dropdown-content ul.move-out > li > a { 
 
    opacity: 1; 
 
} 
 

 
.lg-dropdown-content.is-hidden, .lg-dropdown-content ul.is-hidden { 
 
    /* push the secondary dropdown items to the right */ 
 
    -webkit-transform: translateX(100%); 
 
    -moz-transform: translateX(100%); 
 
    -ms-transform: translateX(100%); 
 
    -o-transform: translateX(100%); 
 
    transform: translateX(100%); 
 
} 
 

 
.lg-dropdown-content ul.move-out > li > a{ 
 
    /* push the dropdown items to the left when secondary dropdown slides in */ 
 
    -webkit-transform: translateX(-100%); 
 
    -moz-transform: translateX(-100%); 
 
    -ms-transform: translateX(-100%); 
 
    -o-transform: translateX(-100%); 
 
    transform: translateX(-100%); 
 
    visibility: hidden; 
 
} 
 

 

 
.lg-dropdown-content .see-all a { 
 
    color: #5f88c3; 
 
} 
 

 
.lg-dropdown-content.move-out > li > a{ 
 
    -webkit-transform: translateX(0); 
 
    -moz-transform: translateX(0); 
 
    -ms-transform: translateX(0); 
 
    -o-transform: translateX(0); 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
} 
 
.lg-dropdown-content .lg-menu { 
 
    top: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
    padding-bottom: 65px; 
 
    background-color: #ffffff; 
 
    box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5); 
 
} 
 

 
.lg-dropdown-content .lg-menu.is-hidden { 
 
    -webkit-transform: translateX(0); 
 
    -moz-transform: translateX(0); 
 
    -ms-transform: translateX(0); 
 
    -o-transform: translateX(0); 
 
    transform: translateX(0); 
 
} 
 
.lg-dropdown-content .lg-menu.fade-in { 
 
    /* animate fade in */ 
 
    -webkit-animation: xs-fade-in 0.2s; 
 
    -moz-animation: xs-fade-in 0.2s; 
 
    animation: xs-fade-in 0.2s; 
 
} 
 
.lg-dropdown-content .lg-menu.fade-out { 
 
    /* animate fade out */ 
 
    -webkit-animation: xs-fade-out 0.2s; 
 
    -moz-animation: xs-fade-out 0.2s; 
 
    animation: xs-fade-out 0.2s; 
 
} 
 

 
.lg-dropdown-content .lg-menu > .see-all { 
 
    position: absolute; 
 
    bottom: 1px; 
 
    height: 45px; 
 
    text-align: center; 
 
} 
 
.lg-dropdown-content .lg-menu > .see-all a { 
 
    margin: 0; 
 
    height: 100%; 
 
    line-height: 45px; 
 
    background: #ebebeb; 
 
    pointer-events: auto; 
 
    -webkit-transition: color 0.2s, background-color 0.2s; 
 
    -moz-transition: color 0.2s, background-color 0.2s; 
 
    transition: color 0.2s, background-color 0.2s; 
 
} 
 
.lg-dropdown-content .lg-menu > .see-all a:hover { 
 
    color: #ffffff; 
 
    background-color: #111433; 
 
} 
 

 
.lg-dropdown-content .lg-menu > li { 
 
    /* 3 column */ 
 
    width: 33.333%; 
 
    float: left; 
 
} 
 

 
.lg-dropdown-content .lg-menu::before { 
 
    /* this is the separation line in the middle of the .lg-menu element */ 
 
    position: absolute; 
 
    content: ''; 
 
    top: 290px; 
 
    left: 15px; 
 
    right: 15px; 
 
    height: 1px; 
 
    width: 100%; 
 
    background-color: #ebebeb; 
 
} 
 

 
.lg-dropdown-content .lg-menu > li > a { 
 
    color: #5f88c3; 
 
    font-size: 1.6rem; 
 
    margin-bottom: 10px; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    pointer-events: none; 
 
} 
 
.lg-dropdown-content .lg-menu > li > a::after, .lg-dropdown-content .lg-menu > li > a::before { 
 
    /* hide the arrow */ 
 
    display: none; 
 
} 
 
.lg-dropdown-content .lg-menu.move-out > li > a { 
 
    -webkit-transform: translateX(0); 
 
    -moz-transform: translateX(0); 
 
    -ms-transform: translateX(0); 
 
    -o-transform: translateX(0); 
 
    transform: translateX(0); 
 
} 
 
.lg-dropdown-content .lg-menu > li { 
 
    margin: 20px 0; 
 
    border-right: 1px solid #ebebeb; 
 
    padding: 0 30px; 
 
    height: 250px; 
 
} 
 

 
.lg-dropdown-content .lg-menu > li > ul { 
 
    -webkit-transform: translate(0); 
 
    -moz-transform: translate(0); 
 
    -ms-transform: translate(0); 
 
    -o-transform: translate(0); 
 
    transform: translate(0); 
 
    position: relative; 
 
    height: auto; 
 
} 
 
.lg-dropdown-content .lg-menu > li > ul > .go-back { 
 
    display: none; 
 
} 
 
.lg-dropdown-content .lg-menu a { 
 
    line-height: 22px; 
 
    height: 20px; 
 
    font-size: 1.3rem; 
 
    padding-left: 0; 
 
} 
 

 
.lg-dropdown-content .lg-menu ul { 
 
    padding-bottom: 25px; 
 
    overflow: hidden; 
 
    height: auto; 
 
    min-height: 100%; 
 
} 
 
.lg-dropdown-content .lg-menu .go-back a { 
 
    padding-left: 20px; 
 
} 
 

 
.lg-dropdown-content .lg-menu .go-back a::before, .lg-dropdown-content .lg-menu .go-back a::after { 
 
    left: 0; 
 
} 
 
.lg-dropdown-content .lg-menu .see-all { 
 
    /*position: absolute;*/ 
 
    /*bottom: 0;*/ 
 
    /*left: 0;*/ 
 
    width: 100%; 
 
} 
 

 
.lg-dropdown-content > .has-children > ul { 
 
    visibility: hidden; 
 
} 
 
.lg-dropdown-content > .has-children > ul.is-active { 
 
    /* when hover over .lg-dropdown-content items - show subnavigation */ 
 
    visibility: visible; 
 
} 
 
.lg-dropdown-content > .has-children > .lg-menu.is-active > li > ul { 
 
    /* if .lg-menu is visible - show also subnavigation */ 
 
    visibility: visible; 
 
} 
 
.lg-dropdown-content > .has-children > a.is-active { 
 
    /* hover effect for .lg-dropdown-content items with subnavigation */ 
 
    color: #5f88c3; 
 
} 
 
.lg-dropdown-content > .has-children > a.is-active::before, .lg-dropdown-content > .has-children > a.is-active::after { 
 
    background: #5f88c3; 
 
} 
 

 

 

 
.has-children > a::before, .go-back a::before { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 

 
.has-children > a::after, .go-back a::after { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
.has-children.root-menu > a::after { 
 

 
    -webkit-transform: rotate(130deg); 
 
    -moz-transform: rotate(130deg); 
 
    -ms-transform: rotate(130deg); 
 
    -o-transform: rotate(130deg); 
 
    transform: rotate(130deg); 
 
} 
 

 

 
.has-children > a { 
 
    padding-right: 40px; 
 
} 
 
.has-children > a::before, .has-children > a::after { 
 
    /* arrow goes on the right side - children navigation */ 
 
    right: 20px; 
 
    -webkit-transform-origin: 9px 50%; 
 
    -moz-transform-origin: 9px 50%; 
 
    -ms-transform-origin: 9px 50%; 
 
    -o-transform-origin: 9px 50%; 
 
    transform-origin: 9px 50%; 
 
} 
 

 
.lg-dropdown-content .go-back a { 
 
    padding-left: 40px; 
 
} 
 
.lg-dropdown-content .go-back a::before, .lg-dropdown-content .go-back a::after { 
 
    /* arrow goes on the left side - go back button */ 
 
    left: 20px; 
 
    -webkit-transform-origin: 1px 50%; 
 
    -moz-transform-origin: 1px 50%; 
 
    -ms-transform-origin: 1px 50%; 
 
    -o-transform-origin: 1px 50%; 
 
    transform-origin: 1px 50%; 
 
} 
 

 
.root-menu.has-children > a::before, .root-menu.has-children > a::after { 
 
    background: #fff; 
 
} 
 

 
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { 
 
    /* arrow icon in CSS - for element with nested unordered lists */ 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: 1px; 
 
    display: inline-block; 
 
    height: 2px; 
 
    width: 10px; 
 
    background: #ffffff; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 

 
@media only screen and (min-width: 1024px) { 
 
    .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { 
 
     background: #b3b3b3; 
 
    } 
 
}

<head> 
 
    <!-- css bootstrap --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <!-- import jquery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <script src="https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js"></script> 
 
    <!-- END import jquery --> 
 
</head> 
 

 

 
<!-- header start --> 
 
<header class="header-pos navbar-fixed-top"> 
 
    <div class="header-bottom-area" > 
 
     <div class="container-fluid"> 
 
      <div class="inner-container"> 
 
       <div class="row"> 
 

 
        <div class="col-lg-12" style="padding:0px;"> 
 
         <nav class="lg-dropdown dropdown-is-active"> 
 
          <ul class="lg-dropdown-content"> 
 
           <li class="has-children root-menu"> 
 
            <a href="#" class="">Products</a> 
 

 
            <ul class="lg-menu is-hidden fade-out"> 
 
             <li class="see-all"><a href="#">All Products</a></li> 
 
             <li class="has-children"><a href="#">Fashion</a> 
 
              <ul class="is-hidden column-two move-out"> 
 
               <li class="go-back"><a href="#0">Products</a></li> 
 
               <li class="see-all"><a href="#">All Fashion</a></li> 
 
               <li class="has-children"><a href="#" title="Women Fashion">Women Fashion</a> 
 
                <ul class="column-two menu-level-2"> 
 
                 <li class="go-back back-width"><a href="#0">Back</a></li> 
 
                 <li class="see-all"><a href="#">All Women Fashion</a></li> 
 
                 <li><a href="#" title="Tudung">Tudung</a></li> 
 
                 <li><a href="#" title="safari">safari</a></li> 
 
                 <li><a href="#" title="safari 2">safari 2</a></li> 
 
                 <li><a href="#" title="Jubah">Jubah</a></li> 
 
                 <li><a href="#" title="Cheong Sam">Cheong Sam</a></li> 
 
                </ul> 
 
               </li> 
 
               <li><a href="#" title="Baby Fashion">Baby Fashion</a></li> 
 
               <li><a href="#" title="Man Fashion">Man Fashion</a></li> 
 
              </ul> 
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </nav> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</header>

Answer 1

Safari瀏覽器在列計數規則竊聽。

從類.lg-dropdown-content .lg-menu ul中刪除％規則中的最小高度或將其定義爲px。

Answer 2

解決..使用引導和jQuery。謝謝