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和谷歌浏览器上完美运行，但它似乎不适用于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 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 */ }

但是如您所见，*选择器看起来并不友好，因此更改doctype肯定是更好的选择。

Answer 2

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