CSS特性IE8

Question

我在我的樣式表中有一個鏈接列表的CSS規則。首先是對<a>標籤一般規則，最後兩個是與故障接管了first-child和last-child僞類

/* weight: (1 class) + (3 elements) = 13 */ 
.topNavigation ul li a { 
color: #666; 
text-decoration: none; 
display: block; 
font-size: 28px; 
margin: 5px 20px; 
} 

/*for both rules: (1 class + [1 pseudo class or 1 class]) + (3 elements) = 23 */ 
.topNavigation ul li:first-child a, .topNavigation ul li.first-child a { 
margin-left: 0; 
} 
.topNavigation ul li:last-child a, .topNavigation ul li.last-child a { 
margin-right: 0; 
} 

HTML中的第一個和最後一個孩子的具體規則是這樣的：

<div class="topNavigation"> 
<ul> 
    <li class="first-child current"> 
     <a href="#">home</a> 
    </li> 
    <li> 
     <a href="#">services</a> 
    </li> 
    <li class="last-child"> 
     <a href="#">blog</a> 
    </li> 
</ul> 
</div> 

總體思路是鏈接包含在<li>中，並且距「<li>」的邊緣「保證金」。問題在於IE8不遵守特殊性，並仍在使用第一條規則（margin: 5px 20px;）中所述的邊距。我已經在IE7，IE9，Chrome和其他瀏覽器中測試過它，只有IE8沒有跟隨。

這個規則有什麼問題嗎？還是我監督一個IE8的錯誤？

Answer 1

您組合在本規則中的僞類和類​​選擇：

.topNavigation ul li:last-child a, .topNavigation ul li.last-child a { 
margin-right: 0; 
} 

由於IE < 9不瞭解:last-child，it should disregard the entire rule（我不知道爲什麼你的作品在IE7，它應該在IE7和IE8中以相同的方式中斷），儘管它可以理解並應用.last-child的規則。因此，它可以回落的唯一保證金就是您的第一個保證金。

從技術上講，唯一的解決辦法是將其分成兩個規則，每個規則一個。

但我建議你只需要添加HTML類。既然你已經在做，爲了支持舊的瀏覽器，還不如把它，因爲所有的瀏覽器支持：

.topNavigation ul li.first-child a { 
margin-left: 0; 
} 
.topNavigation ul li.last-child a { 
margin-right: 0; 
}