【问题标题】::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 插件。
          猜你喜欢
          • 2013-09-26
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-05-28
          • 1970-01-01
          • 2020-09-11
          • 1970-01-01
          相关资源
          最近更新 更多