Firefox 和 Chrome 之間 1 像素的行高差

在 asp.net 中使用母版頁進行新的網站設計。頁面的標題是一個 35px 高的“菜單欄”，其中包含一個呈現為無序列表的 asp 菜單控制項。

所選菜單項的樣式具有不同顏色的背景和左右兩側的 2px 邊框。所選菜單項的底部應與菜單欄的底部對齊，以便所選“選項卡”看起來好像流入下方的內容。在 Firefox 和 IE 中看起來不錯，但在 chrome 中，“選項卡”似乎比菜單欄底部高 1 個像素。

只是想知道是否有某種我不知道的錯誤。

我意識到你很可能需要程式碼來幫助解決這個問題，所以我會盡快發布 css。

編輯：

這是菜單的CSS…

div.hideSkiplink
{     
   width:40%;
   float:right;
   height:35px;
}

div.menu
{
   padding: 0px 0px 0px 0px;
   display:inline;
}

div.menu ul
{
   list-style: none;
}

div.menu ul li
{
   margin:0px 4px 0px 0px;
}

div.menu ul li a, div.menu ul li a:visited
{
 color: #ffffff;
 display: block;
 margin-top:0px;
 line-height: 17px;
 padding: 1px 20px;
 text-decoration: none;
 white-space: nowrap;
}

div.menu ul li a:hover
{
 color: #ffffff;
 text-decoration: none;
 border-top: 1px solid #fff;
 border-right: 1px solid #fff;
 border-bottom: none;
 border-left: 1px solid #fff;
}




div.menu ul li a:active
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
color: #000000 !important;
font-weight:bold;

}


div.menu ul a.selected
{
 color: #000000 !important;
 font-weight:bold;
}

div.menu ul li.selected
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
}

div.menu ul li.selected a:hover
{
 border: none;
}

選定的類通過 jquery 添加到 li 和 a 元素…

這是問題的螢幕截圖… chrome 範例在頂部，您可以在選項卡下方看到 1px 的紅色邊框。底部是 Firefox 圖像，一切正常。

編輯：

在玩了更多之後，我發現它實際上是“標題” div 本身在 chrome 中增長了 1px ……這對我來說似乎很奇怪。

重要的是要意識到網頁在不同瀏覽器中的呈現方式總是不同的。實現像素完美是徒勞的，現在我試圖向我的客戶解釋要讓每個瀏覽器呈現完全一樣的網站所涉及的成本。現在更常見的是，他們明白 IE6 和 FF4 永遠不會以相同的方式呈現任何頁面。我們必須努力讓我們的客戶理解並接受網路的動態。

漸進增強和優雅降級。和平。

這些答案都不能解決問題。

放：

line-height: 1;
padding-top: 2px;

因為 webkit 和 mozilla 渲染引擎以不同的方式實現行高，所以不要使用它來操縱單個行項目的測量。

對於菜單、按鈕和特別是非常小的通知氣泡等項目，將行高重置為正常並使用填充或邊距使它們的行為相同。

這是說明此問題的 JSFiddle：http: //jsfiddle.net/mahalie/BSMZe/6/

引用自：https://stackoverflow.com/questions/4439537