CSS子选择器在ie9上不起作用答案

【问题标题】：CSS child selector doesn't work on ie9CSS子选择器在ie9上不起作用
【发布时间】：2011-05-17 12:00:40
【问题描述】：

我有一个这样的页面：

<body>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
</body>

我需要做的是使所有这些表格的宽度为 85%，并在页面上水平居中。如果页面是单个页面，这将很容易，但这需要在 100 多个页面上工作，并且它们唯一的共同点是样式表文件。所以我只需要用 css 来做这个。我无法覆盖 div 内的表格或使用 jquery。

我尝试的是：

body { text-align:center; }
body > table { text-align: left; margin: 0 auto; width: 85%; }

这在 Firefox 和 google chrome 上完美运行，但它似乎不适用于 ie9（没有测试，但我确信它不适用于早期的 ie 版本）

我尝试了很多他们在类似问题上写的方法，但无法解决这个问题。

编辑：

页面的文档类型是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

我改成了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

它现在也可以在 ie9 上运行！

更新后的问题是：是否可以不更改文档类型？

【问题讨论】：

我确定子选择器本身工作得很好。另一方面，CSS width 规则可能会因为table 元素上的width 属性而被忽略。您是否尝试过从标记中删除 width="100%"？ - 它真的不属于那里。
选择器“不工作”与未应用 CSS 规则是完全不同的问题。
啊，我将文档类型从“4.01 Transitional”设置为“1.0 Transitional”，现在似乎可以使用了。但我现在想知道，是否有一个解决方案可以在不更改文档类型的情况下应用（仅使用 css，因为我正在尝试这样做）（我没有设计这个网站，我不想编辑数百个文件）
@conrad 您的 HTML 4 过渡文档类型看起来无效 - 请参阅 w3.org/TR/html40/struct/global.html
@conrad：只需使用 HTML5 文档类型：<!DOCTYPE html>。并不是说它会解决您的问题，但它会删除格式错误的文档类型作为问题/

【解决方案1】：

正如蒋毅所说，您的 doctype 声明不正确。 IE9 可能不知道该怎么做，所以返回并隐藏在它的 quirks-mode shell 中，它对子选择器视而不见（或者，变为10 years younger）。

最简单且绝对推荐的方法是更改您的 doctype 声明，以使其恢复到标准模式并应用规则：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

否则，您可以尝试放弃子选择器并尝试使用您喜欢的任何默认样式重置其余表格的样式：

body { text-align:center; }
body table { text-align: left; margin: 0 auto; width: 85%; }
body * table { /* Styles for other tables */ }

但正如你所见，那里的* 选择器看起来不太友好，因此更改文档类型绝对是更好的选择。

【讨论】：

【解决方案2】：

我把这个 jsfiddle 放在一起，看起来它可以在 IE9 上运行：

【讨论】：

在不使用 CSS 重置的情况下，同样的小提琴工作吗？取消选中“规范化 CSS”框。（抱歉，由于我现在靠近 Windows 机器，所以我无法自己测试。）
啊，我将文档类型从“4.01 Transitional”设置为“1.0 Transitional”，现在似乎可以使用了。但我现在想知道，是否有一个解决方案可以在不更改文档类型的情况下应用（仅使用 css，因为我正在尝试这样做）（我没有设计这个网站，我不想编辑数百个文件）
@Matt Ball 好建议，我在没有重置 CSS 的情况下尝试过。我还尝试使用 HTML 4.01 过渡和 XHMTL 1.0 过渡标头。他们都在IE9中工作。康拉德我认为这可能会帮助您缩小问题范围。鉴于此测试，我认为您的 CSS 选择器没有问题。您是否尝试验证页面？也许它不是有效的 HTML，这就是导致问题的原因。