：最後一個孩子在IE8中無法正常工作

我在爲IE8中的最後一個孩子設計TH時遇到了困難。：最後一個孩子在IE8中無法正常工作

請在這裏找到小提琴。 http://jsfiddle.net/archanabr05/yokLbocx/

問題是：我想在標題單元格之間創建一個白色邊框，但避免使用最後一個標題單元格。

所以我用：

CSS：

th:last-child { 
border-right:none; 
}

我知道在這個IE8多年平均值的工作，我們是否有任何解決方案去了解它，jQuery是精也和我在一起。

我沒有固定的列，所有的時間。所以我不能根據固定數量的單元格進行設計。

來源

2015-06-12 Archana

使用:first-child - http://caniuse.com/#feat=css-sel2

.table{ 
 
    border-spacing: 0; 
 
    border:2px solid #e5e5e5; 
 
    border-collapse: collapse; 
 
} 
 
tr th{ 
 
} 
 
th{ 
 
    padding:30px; 
 
    background:#e5e5e5; 
 
    border-left: 2px solid #fff; 
 
} 
 
th:first-child{ 
 
    border-left: none; 
 
} 
 
td { 
 
    
 
    border-right: 2px solid #e5e5e5!important; 
 
    border-top: 1px solid #e5e5e5!important; 
 
    padding: 30px; 
 
    background:#fff 
 
}

<table class="table"> 
 
    <tr> 
 
     <th>Header 1</th> 
 
     <th>Header 2</th> 
 
     <th>Header 3</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Yes</td> 
 
     <td>Yes</td> 
 
     <td>No</td> 
 
    </tr> 
 
</table>

來源

2015-06-12 13:25:27 Dmitriy

可愛...這是一個非常聰明的解決方案。 :) – Archana

您可以使用Selectivizr來做到這一點。 Selectivizr是模擬CSS3僞類舊瀏覽器，如6/7/8

來源

2015-06-12 10:11:58

使用jQuery的實用程序：

<script type="text/javascript"> 

    jQuery(document).ready(function() { 

    $("th:last").css(border-right: "none"); 

}); 
    </script>

來源

2015-06-12 10:19:10

這不是工作 – Archana

你可以做一個簡單的黑客。

在過去個把一個類的名字，寫的是CSS裏面ie.css（其中只加載在IE）

爲只能在IE加載CSS文件，你可以使用這樣的條件語句。

<!--[if lte IE 9]> 
 
    <link rel="stylesheet" href="./css/ie.css"> 
 
    <![endif]-->

的CSS可以是這樣的。

th.last-child { 
 
    border-right: none; 
 
}

所以在這種方式，你不需要加載其他第三方jQuery插件做同樣的。

來源

2015-06-12 10:20:02

我不能使用任何條件語句 – Archana

的條件語句必須保持在HTML的head標籤。 –

我的意思是我不允許使用條件語句 – Archana

到:first-child（which is a nice compatible solution）另一種方法是與相對的邊界使用相鄰的兄弟選擇器（在+符號和它has excellent support）。你是那麼的代碼應該是這樣的：

.table{ 
 
    border-spacing: 0; 
 
    border:2px solid #e5e5e5; 
 
    border-collapse: collapse; 
 
} 
 
tr th{ 
 
} 
 
th{ 
 
    padding:30px; 
 
    background:#e5e5e5; 
 
} 
 
th + th{ 
 
    border-left:2px solid #fff; 
 
} 
 
td { 
 
    
 
    border-right: 2px solid #e5e5e5!important; 
 
    border-top: 1px solid #e5e5e5!important; 
 
    padding: 30px; 
 
    background:#fff 
 
}

<table class="table"> 
 
    <tr> 
 
     <th>Header 1</th> 
 
     <th>Header 2</th> 
 
     <th>Header 3</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Yes</td> 
 
     <td>Yes</td> 
 
     <td>No</td> 
 
    </tr> 
 
</table>

來源

2015-06-12 13:35:35

：最後一個孩子在IE8中無法正常工作

回答

相關問題