CSS子选择器不适用于ie9

Question

我有这样一个页面：

<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和谷歌chrome，但它似乎不适用于ie9（没有测试，但我敢肯定它不适用于早期版本）

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

编辑：

该页面的doctype是：

<!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！

更新的问题是：是否可以在不更改doctype的情况下进行更改？

Answer 1

正如易江所说，你的文件声明不正确。 IE9可能无法弄清楚该如何处理，所以跑回来并隐藏在它的怪癖模式shell中，在那里它变得对子选择器失明（或者，变得更年轻10岁）。

最简单且肯定推荐的方法是更改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 */ }

但正如你所看到的那样， *选择器看起来并不友好，因此更改doctype肯定是更好的选择。

Answer 2

我把这个jsfiddle放在一起，看起来它适用于IE9：

http://jsfiddle.net/XFgLf/