鉻瀏覽器中的菜單不同

由於某種原因，我的菜單欄（固定）在Chrome瀏覽器中是2行，在所有其他瀏覽器中都是正常的。任何想法爲什麼或如何解決它？我試圖弄清楚，但我沒有修復它。它是瀏覽器默認塊高度的問題還是什麼？我需要使它在Chrome和所有其他瀏覽器上工作。鉻瀏覽器中的菜單不同

的jsfiddle：https://jsfiddle.net/wkupr9L6/1/

HTML：

<script> 
$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 65) { 
     $("nav").css("opacity", "0.2"); 
} 
    else { 
     $("nav").css("opacity", "1"); 
    } 
}); 

    </script> 
</head> 

<body> 
<!--MENU BAR!--> 
    <nav class="navig"> 
    <span class="nadpis"> <a href="javascript:history.go(0)"> RPO </a> </span> 
    <ul class="nav"> 
    <li class="prve"><a href="#">Dátumy</a> 
    <ul> 
     <li><a href="#">1-7/7/2016</a> 
     <ul> 
     <li><a href="#172016">1/7/2016</a></li> 
     <li><a href="#272016">2/7/2016</a></li> 
     <li><a href="#372016">3/7/2016</a></li> 
     <li><a href="#472016">4/7/2016</a></li> 
     <li><a href="#572016">5/7/2016</a></li> 
     <li><a href="#672016">6/7/2016</a></li> 
     <li><a href="#772016">7/7/2016</a></li> 
     </ul> 
     </li> 
     <li><a href="#">8-14/7/2016</a> 
     <ul> 
     <li><a href="#872016">8/7/2016</a></li> 
     <li><a href="#972016">9/7/2016</a></li> 
     <li><a href="#1072016">10/7/2016</a></li> 
     <li><a href="#1172016">11/7/2016</a></li> 
     <li><a href="#1272016">12/7/2016</a></li> 
     <li><a href="#1372016">13/7/2016</a></li> 
     <li><a href="#1472016">14/7/2016</a></li> 
     </ul> 
     </li> 
     <li><a href="#">15-21/7/2016</a> 
     <ul> 
     <li><a href="#">15/7/2016</a></li> 
     <li><a href="#">9/7/2016</a></li> 
     <li><a href="#">10/7/2016</a></li> 
     <li><a href="#">11/7/2016</a></li> 
     <li><a href="#">12/7/2016</a></li> 
     <li><a href="#">13/7/2016</a></li> 
     <li><a href="#">14/7/2016</a></li> 
     </ul> 
     </li>   
    </ul> 
    </li> 
    <li class="druhe"><a href="#">&#9776</a> 
    <ul> 
     <li> <a href="flv.html"> FLV </a> 
     <ul> 
     <li><a href="flvmena/meno1.html">meno1 </a></li> 
     <li><a href="flvmena/meno2.html">meno2 </a></li> 
     <li><a href="flvmena/meno3.html">meno3 </a></li> 
     <li><a href="flvmena/meno4.html">meno4 </a></li> 
     <li><a href="flvmena/meno5.html">meno5 </a></li> 
     </ul> 
     </li> 
     <li> <a href="flc.html"> FLC </a> 
     <ul> 
     <li><a href="flcmena/meno1.html">meno1 </a></li> 
     <li><a href="flcmena/meno2.html">meno2 </a></li> 
     <li><a href="flcmena/meno3.html">meno3 </a></li> 
     <li><a href="flcmena/meno4.html">meno4 </a></li> 
     <li><a href="flcmena/meno5.html">meno5 </a></li> 
     </ul> 
     </li> 
     <li> <a href="qua.html"> QUA </a> 
     <ul> 
     <li><a href="quamena/meno1.html">meno1 </a></li> 
     <li><a href="quamena/meno2.html">meno2 </a></li> 
     <li><a href="quamena/meno3.html">meno3 </a></li> 
     <li><a href="quamena/meno4.html">meno4 </a></li> 
     <li><a href="quamena/meno5.html">meno5 </a></li> 
     </ul> 
     </li> 
     <li> <a href="hfx.html"> HFX </a> 
     <ul> 
     <li><a href="hfxmena/meno1.html">meno1 </a></li> 
     <li><a href="hfxmena/meno2.html">meno2 </a></li> 
     <li><a href="hfxmena/meno3.html">meno3 </a></li> 
     <li><a href="hfxmena/meno4.html">meno4 </a></li> 
     <li><a href="hfxmena/meno5.html">meno5 </a></li> 
     </ul> 
     </li> 
     <li> <a href="pdt.html"> PDT </a> 
     <ul> 
     <li><a href="pdtmena/meno1.html">meno1 </a></li> 
     <li><a href="pdtmena/meno2.html">meno2 </a></li> 
     <li><a href="pdtmena/meno3.html">meno3 </a></li> 
     <li><a href="pdtmena/meno4.html">meno4 </a></li> 
     <li><a href="pdtmena/meno5.html">meno5 </a></li> 
     </ul></li> 
     <li> <a href="rsh.html"> RSH </a> 
     <ul> 
     <li><a href="rshmena/meno1.html">meno1 </a></li> 
     <li><a href="rshmena/meno2.html">meno2 </a></li> 
     <li><a href="rshmena/meno3.html">meno3 </a></li> 
     <li><a href="rshmena/meno4.html">meno4 </a></li> 
     <li><a href="rshmena/meno5.html">meno5 </a></li> 
     </ul> 
     </li> 
     <li> <a href="bur.html"> BUR </a> 
     <ul> 
     <li><a href="burmena/meno1.html">meno1 </a></li> 
     <li><a href="burmena/meno2.html">meno2 </a></li> 
     <li><a href="burmena/meno3.html">meno3 </a></li> 
     <li><a href="burmena/meno4.html">meno4 </a></li> 
     <li><a href="burmena/meno5.html">meno5 </a></li> 
     </ul> 
     </li> 
     <li> <a href="suhrn.html" style="color: #ea9b54">SUHRN</a> </li> 
     <li> <a href="inci.html" style="color: #ea9b54"> INCI </a> </li> 
     <li> <a href="jira.html" style="color: #ea9b54"> JIRA </a> </li> 
     <li> <a href="chgt.html" style="color: #ea9b54"> CHGT </a> </li> 
     <li> <a href="task.html" style="color: #ea9b54"> TASK </a> </li> 
     <li> <a href="vrs.html" style="color: #ea9b54"> VRS </a> </li> 
     </div> 
    </ul> 
    </li> 
    </ul> 
    </nav>

CSS：

body, nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

nav {  
    display: inline-block; 
    position: fixed; 
    width: 100%; 
    text-align: center; 
    background-color: #111; 
    vertical-align: top; 
    top: -1px; 
    opacity: 1; 
    transition: 0.3s; 
} 

nav:hover { 
    opacity: 1!important; 
    background-color: #111; 
    transition: 0.3s; 

} 

.nav a { 
    display: block; 
    background: #111; 
    color: #fff; 
    text-decoration: none; 
    padding: 0.7em 1.7em; 
    text-transform: uppercase; 
    font-size: 85%; 
    letter-spacing: 3px; 
    position: relative; 
} 

.nav{ 
    vertical-align: top; 
    display: inline-block; 
} 

.nav li { 
    position: relative; 
} 

.nav > li { 
    float: left; 
    margin-right: 1px; 
} 

.nav li:hover > a { 
    transition: 0.3s; 
    background-color:#3a3939; 
    color: #40d23b; 
} 

.nav ul { 
    position: absolute; 
    white-space: nowrap; 
    z-index: 1; 
    left: -99999em; 
    background-color: #000; 
    border: 2px solid #81D4FA; 
    border-top: none; 
} 
.nav > li:hover > ul { 
    left: auto; 
    min-width: 100%; 
} 

.nav > li li:hover > ul { 
    left: 100%; 
    top:-1px; 
} 

.nav > li:hover > a:first-child:nth-last-child(2):before { 
    border: 5px solid transparent; 
} 

.nav li li:hover > a:first-child:nth-last-child(2):before { 
    border: 5px solid transparent; 
    right: 10px; 
} 

.prve{ 
    max-width:125px; 
    min-width: 90px; 
    border: 2px solid #81D4FA; 
    border-bottom: none; 
    border-top: none; 
} 

.druhe { 
    max-width: 14px; 
    min-width: 110px; 
    border-right: 2px solid #81D4FA; 
} 
    span { 
    float:left; 
    margin-left: 3px; 
} 
span a{ 
    text-decoration: none; 
    color:#2670CF; 
    background-color:#111; 
    font-family: 'Helvetica Neue', sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
}

感謝您的幫助

來源

2016-07-24 Fred007

隨意忽略這個建議，但通過創建[的jsfiddle（http://jsfiddle.net）您的問題，它會更容易爲響應測試代碼並看看什麼有效，什麼沒有。 – Toby

我加了jsfiddle。希望它有幫助:) – Fred007

顯示.druhe的最大寬度爲14px;如果你刪除它，你會在一行中得到一切。 –

這似乎並不像一個瀏覽器的問題。您將.nav設置爲display: inline-block;，但兩個內部<li>元素上沒有任何內容將它們強制到同一行上。

我加了這一點：

.nav > li { 
    display: inline-block; 
}

它在Chrome對我的作品。在這裏看到：

https://jsfiddle.net/tobyl/wkupr9L6/6/

來源

2016-07-24 20:33:40 Toby

它的工作原理。謝謝。但我仍然想知道。除了Chrome以外，其他所有瀏覽器都可以工作嗎？ – Fred007

很難說..有許多情況下，CSS會讓瀏覽器決定如何最好地呈現元素，但如果它在多個其他瀏覽器中以相同的屏幕尺寸工作，這很奇怪。 – Toby

是的跨瀏覽器兼容性是一個真正的挑戰。最終，這一切都取決於您正在構建的應用程序的需求。大型公司的大多數內部項目專注於IE（用於安全？），但使用統計數據顯示，大約80％的用戶使用Chrome。另外，下面是關於跨瀏覽器問題的討論鏈接：http://stackoverflow.com/questions/565641/what-cross-browser-issues-have-you-faced最後一件事，您可以獲取caniuse的幫助您可能會遇到的設計問題：http://caniuse.com/ –

鉻瀏覽器中的菜單不同

回答

相關問題