:last-child 在 IE8 中不起作用答案

【问题标题】：:last-child does not work in IE8:last-child 在 IE8 中不起作用
【发布时间】：2015-06-12 21:41:08
【问题描述】：

我在 IE8 中设置 TH last-child 的样式时遇到了困难。

请在这里找到小提琴。 http://jsfiddle.net/archanabr05/yokLbocx/

问题是：我想在标题单元格之间创建一个白色边框，但要避免最后一个标题单元格。

所以我用了：

CSS：

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

我知道这在 IE8 中不起作用，我们有什么解决方案吗，jquery 对我也很好。

我一直没有固定的列。因此，我无法根据固定数量的单元格设置样式。

【问题讨论】：

标签： jquery html css

【解决方案1】：

使用: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>

【讨论】：

可爱...这是一个非常智能的解决方案。 :)

【解决方案2】：

您可以使用Selectivizr 来执行此操作。 Selectivizr 是一个为旧浏览器（如 I6/7/8）模拟 CSS3 伪类的实用程序

【讨论】：

【解决方案3】：

: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>

【讨论】：

【解决方案4】：

使用 jQuery：

 <script type="text/javascript">

    jQuery(document).ready(function () {

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

});
    </script>

【讨论】：

【解决方案5】：

你可以做一个简单的 hack。

把一个类名放在最后一个，把它的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;
}

因此，通过这种方式，您不需要加载另一个 3rd 方 jquery 插件来执行相同的操作。

【讨论】：

我不能使用任何条件语句
条件语句必须保存在 HTML 的 head 标签中。
我的意思是我不允许使用条件语句
哦，所以最好使用 Selectivizr 插件。