FireFox和Chrome之間的CSS問題

好的，這是我之前發現的問題的延續here。FireFox和Chrome之間的CSS問題

我有一個asp.net菜單控件樣式爲無序列表，在Chrome和Firefox中呈現略有不同。我確信這是由於我的CSS錯誤，而不是兩個瀏覽器之間的怪癖。

我重新創建了菜單here。

這裏是一個屏幕截圖描繪的問題（在上面的Chrome，火狐在底部）：

alt text

任何想法？

來源

2010-12-21 stephen776

您是否嘗試調整行高？ – meo 2010-12-21 23:30:47

嘗試在「li」和「a」元素上調整線條高度...我可以在每個瀏覽器中單獨使用不同的線高度值，但無法讓它們在一起播放時很好看......不想加載不同的基於當前瀏覽器的css文件（也許現實是，這是不能避免的生產情況？）... – stephen776 2010-12-22 00:22:16

我在這種情況下做的是追加一個類與瀏覽器和操作系統的身體。 – meo 2010-12-22 10:14:12

因爲您提供的demo似乎在IE瀏覽器，而無望，我提出了新的CSS去與你的HTML，試圖讓你的舊CSS的行爲：

（在IE7/8，Firefox的測試，Chrome瀏覽器）

Live Demo

你的HTML（微變：href="#"/class="selected"）：

<div class="header"> 
    <div class="headerInner"> 

     <div class="hideSkipLink"> 
     <div class="menu"> 
      <ul> 
       <li><a href="#">Test 1</a></li> 
       <li><a href="#" class="selected">Test 2</a></li> 
       <li><a href="#">Test 3</a></li> 
      </ul> 
     </div> 
     </div> 

    </div> 
</div>

新的CSS：

.header { 
    font: 12px/18px Tahoma,arial,sans-serif; 
    height: 33px; 
    background: #666; 
    border-bottom: 2px solid #a10000; 
} 
.header ul { 
    margin: 0; 
    padding: 8px 0 0 0; 
    list-style: none; 
    height: 33px 
} 
.header li { 
    display: inline 
} 
.header li a { 
    float: left; 
    display: block; 
    margin: 0 0 0 4px; 
    padding: 3px 20px 0 20px; 
    height: 22px; 
    text-align: center; 
    color: #fff; 
    text-decoration: none 
} 
.header li a:hover { 
    border: 1px solid #fff; 
    border-bottom: none; 
    padding: 2px 19px 0 19px; 
} 
.header li .selected, .header li a:active { 
    font-weight: bold; 
    color: #000; 
    background: #fff; 
    border: 2px solid #a10000 !important; 
    border-bottom: none !important; 
    padding: 3px 20px 0 20px !important; 
}

來源

2010-12-22 00:28:45 thirtydot

檢查元素的填充。他們似乎都轉移了幾個像素。另外，你可以給我們的CSS嗎？

來源

2010-12-21 23:22:38 Blender

FireFox和Chrome之間的CSS問題

回答

相關問題