Firefox和Chrome渲染之間的巨大差異

相同的HTML/CSS會返回不同的結果......這裏發生了什麼？Firefox和Chrome渲染之間的巨大差異

我已經包含了頁面的所有相關CSS和整個HTML標記，以便您可以看到結構。您可以在包含「search1.png」的代碼底部附近找到搜索欄的html。

我已經有兩個瀏覽器之間的大小/位置略有不同的下拉菜單的問題，我懷疑這是因爲它們以略有不同的方式呈現主導航項目中的文本。

任何有識之士將不勝感激！

FIREFOX：

反轉片：

nav ul{ 
text-align:right; 
font-size:0; 
list-style-type: none; 
} 

nav ul li{ 
display:inline-block; 
height:54px; 
padding:0 20 0 20; 
background:white; 
color:black; 
text-align: center; 
vertical-align: middle; 
line-height: 54px; 
font-size:15; 
} 

nav ul li:hover{ 
background:#222; 
color:white; 
} 

nav ul ul { 
    display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 

nav ul ul { 
position: absolute; 
padding-top:15px; 
padding-bottom:15px; 
padding-left:0px; 
background:#222; 
z-index:100; 
border-bottom-left-radius:5px; 
border-bottom-right-radius:5px; 
overflow:hidden; 
} 

/* SEARCH */ 
li.red:nth-child(7) > ul:nth-child(1){ 
width: 328px; 
margin-left: -277px; 
text-align: center; 
margin-top: 54px; 
vertical-align: middle; 
padding-top:15px; 
padding-bottom:15px; 
position:relative; 
}

HTML：

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>SENECA AV</title> 
<link rel="stylesheet" type="text/css" href="style1.css"> 
</head> 

<body> 

<div id="top" class="bars"><img src="senecalogo1.png" alt="SENECA"> 
    <nav> 
    <ul> 
     <li> PRODUCTS 
     <ul> 
      <li></li> 
     </ul> 
     </li> 
     <li> CATALOG 
     <ul class="left"> 
      <li>STUFF</li> 
      <li>THINGS</li> 
     </ul> 
     </li> 
     <li> SHOP 
     </li> 
     <li class="red"> COMPANY 
     </li> 
     <li class="red"> HELP 
     <ul> 
      <li> Ask a question </li> 
      <li> Register your product </li> 
      <li> Returns/Exchanges </li> 
      <li> Warranty </li> 
      <li> FAQ </li> 
     </ul> 
     </li> 
     <li class="red"> TRADE 
     <ul> 
      <li> Open an account </li> 
      <li> Online Retailers </li> 
      <li> Retail Stores </li> 
      <li> Contract </li> 
     </ul> 
     </li> 
     <li class="red" style="padding:0 8 0 8;background-image:url('search1.png');width:43px;background-repeat:no-repeat;background-position:center;">  
     <ul> 
      <input type="text" value="item, number, SKU"> 
      <input type="submit" value="search"> 
     </ul> 
     </li> 
     <li class="red" style="padding:0 15 0 0;"> 
     </li> 
    </ul> 
    </nav> 
</div> 

<div id="bottom" class="bars"></div> 

</body> 
</html>

來源

2014-03-13 AllTheTime

請創建jsfiddle我們可以看到你的問題 – DonJuwe

一堆鬼混後，我發現這個問題。這有點複雜，這可能是爲什麼我不能更快地看到解決方案。

我在頁面頂部丟失了一個DOCTYPE聲明。

添加這個即時打破了頁面，並使整個導航消失，因爲我沒有正確地聲明CSS尺寸值。快速查看控制檯，瞭解哪些屬性存在問題，以便我可以逐個修復它們。

例如：

padding:0 20 0 20;

必須

padding:0px 20px 0px 20px;

一旦所有相關的屬性必須附加到他們的價值觀的菜單項又出現了 '像素'。

此外，

nav ul ul { 
line-height:15px; 
}

需要添加擺脫的riduculous過度填充在Chrome範例明顯高於其也出現在Firefox一旦DOCTYPE是因爲加入...

line-height:54px;

正在繼承父母李（導航ul裏）

來源

2014-03-13 10:33:02 AllTheTime

Firefox和Chrome渲染之間的巨大差異

回答

相關問題