芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
3

IE8 中关于 colspan 属性的 bug

作者 芒果/分类 代码/发布于 2011-07-14 17:43

IE8 认为所有的表格单元格都具有 colspan 属性。因此如果需要单独针对具有 colspan 属性的单元格设置样式,就有点棘手了。

td[colspan],
th[colspan] {
/* 注意:不管单元格是否有 colspan 属性,在 IE8 中该样式一律是生效的 */
background: red;
}

你期望的结果可能是酱紫的:

但往往在 IE8 下,样式被应用到了所有单元格:

这个 bug 仅限于 IE8 浏览器,IE7 和 IE9 都没有这个问题。IE6 本身并不支持属性选择器,就不说了。不但如此,IE8 还认为这个莫须有的 colspan 值为 1,因此以下选择器均无效。

th[colspan],
th[colspan="1"],
th[colspan*="1"],
th[colspan^="1"],
th[colspan$="1"],
td[colspan],
td[colspan="1"],
td[colspan*="1"],
td[colspan^="1"],
td[colspan$="1"] {
/* IE8 中所有可能出现问题的情况 */
}

解决方案:

如果你确实需要使得该选择器能在 IE8 下正常工作,可以使用给 colspan 属性赋值的方法实现,但必须保证属性值不为 1,看起来有点糟糕,但的确是奏效的。

th[colspan*="0"],
th[colspan*="2"],
th[colspan*="3"],
th[colspan*="4"],
th[colspan*="5"],
th[colspan*="6"],
th[colspan*="7"],
th[colspan*="8"],
th[colspan*="9"],
th[colspan*="11"] {
/* styles */
}
td[colspan*="0"],
td[colspan*="2"],
td[colspan*="3"],
td[colspan*="4"],
td[colspan*="5"],
td[colspan*="6"],
td[colspan*="7"],
td[colspan*="8"],
td[colspan*="9"],
td[colspan*="11"] {
/* styles */
}

英文原稿:IE 8 Thinks All Table Cells Have a Colspan | CSS-Tricks
翻译整理:IE8 中关于 colspan 属性的 bug | 芒果小站

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/colspan-attribute-bug-in-ie8/" title="IE8 中关于 colspan 属性的 bug" rel="bookmark">IE8 中关于 colspan 属性的 bug | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 3 条群众意见

  1. ?
    IE8 中关于 colspan 属性的 bug | 千里走单骑 /2011-07-14 18:08

    […] 表单控件的按钮聚焦问题 (9) © 2010 芒果小站 | 固定链接 | 没有评论 | 标签 CSS-Tricks, IE, IE8 View full post on […] 回应

    #1
  2. IM路人 /2011-07-15 14:04

    太技术流了~~~不懂~~~ 回应

    #2
  3. PC3000 /2011-07-15 15:29

    又见高端交流 回应

    #3

下面我简单说几句