爲什麼我的CSS在IE中呈現錯誤？

Question

您會注意到：在主要導航區域（徽標下的灰色條）中，對於網站testing.ksischool.com中的鏈接，懸停CSS可以在Firefox中正常工作，但IE7會截斷幾個填充像素。爲什麼？

Answer 1

我假設你在談論頂級導航;你正在填充一個內聯元素（<a>標籤）。當在內聯元素上放置填充時，水平填充將推動其他元素，但垂直填充只會增加元素的大小而不影響其周圍的佈局。 Firefox可能會將源代碼中位於其下方元素上方的框渲染出來，但無論出於何種原因，IE都將其渲染在底下，這就是爲什麼您會看到框的部分消失。

要解決這個問題，請將所有鏈接都留下（實質上將它們變成塊元素）。您需要在其他地方調整您的標記以使其正常工作（如果您只是直接浮動，可能會出現一些清除問題），但這應該解決特定的IE問題。

---

編輯的更多詳細信息：

如上所述，垂直填充內聯元素沒有做出你所期望的（它增加元素的高度的方式，但由於填充沒有按」 t與其他頁面元素交互時，內聯元素通常以奇怪的方式重疊事物）。所以要解決這個問題，你需要使填充的元素（<a>標籤）具有display: block。爲了讓所有東西保持在同一條線上，向左漂浮是你最好的選擇。下面是我會使用標記和樣式：

<style type="text/css"> 
.mainnav { 
    font-size: 1em; 
    color: #999; 
    list-style-type: none; 
    /* zoom triggers hasLayout on IE, ignored by others 
    Necessary for the clearfix */ 
    zoom: 1; 
} 

.mainnav:after { 
    /* This lets the .mainnav auto-clear its floated contents */ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.mainnav li { 
    float: left; 
    margin: 0 2px; 
    /* Place background (disc image) here w/ appropriate padding */ 
} 

.mainnav li.last { 
    background: none; 
} 

.mainnav a:link, .mainnav a:visited { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding: 1px 1px 2px; 
    border: solid 1px transparent; 
} 

.mainnav a:hover { 
    color: #fff; 
    background: #999; 
    text-decoration: none; 
    padding: 1px 1px 2px; 
    border: solid 1px #ccc; 
} 

.mainnav a.selected, .mainnav a.selected:hover { 
    color: #B59B24; 
    background: transparent; 
    text-decoration: none; 
} 
</style> 

<ul class="mainnav"> 
    <li><a href="/" class='selected'>Home</a></li> 
    <li><a href="/About" >About</a></li> 
    <li><a href="/Admissions" >Admissions</a></li> 
    <li><a href="/Curriculum" >Curriculum</a></li> 
    <li><a href="/Home/VacancyList" >Careers</a></li> 
    <li class="last"><a href="/Contact" >Contact</a></li> 
</ul> 

需要注意以下幾點：我使用了一個標準的clearfix（谷歌這個，如果你不知道我在說什麼），以確保UL清除其漂浮的內容。如果用戶調整字體大小，這將允許父導航元素的大小適當增大。

此外，我刪除了間隔·，並建議在CSS中使用背景圖像和.last類。這完全是個人偏好。 （在一個理想的世界中，你會使用：僞類之後注入·，但是由於IE 6不支持它，所以你不能這樣做，並支持所有的瀏覽器。）我推薦一個背景圖片而不是隻是將它留在標記中就是它會導致更清晰的標記，並且更容易在路上改變（如果您的客戶決定他們需要管道而不是點）。

此標記/樣式背後的邏輯是，您需要填充<a>以使邊框/背景顏色起作用，這意味着它必須具有display: block。然而，添加它會將每條鏈接粘貼在不同的行上，所以您需要浮動它或它的父項。由於它是列表的一部分，浮動li父項並使用clearfix來確保ul仍然存在於頁面上更容易。

顯然，如果您使用此代碼，則需要刪除樣式表中較低位的大部分#nav_banner element，並且您可能需要再次調試跨瀏覽器。即使你不這樣做，但希望它能爲您提供一些構想，以便將來輕鬆構建頂級導航。

Answer 2

嘗試添加display：inline-block到a元素。我不確定它是多麼兼容，但它在IE7和FF中可用。

編輯：一個蠟筆的解決方案肯定是更好的，更常見的做法。