margin: 0 auto 在IE中无效的正解——缺少DOCTYPE

今天做个页面,想居中,代码简化如下:

<body>
<div style="width:1003px; margin:0px auto;">
...
</div>
</body>

在Firefox和Opera中均能正确居中,而IE却始终居左,先前做网页都用同样的方法,却只有这次不行。

由于实际代码比较复杂,怕是其他代码干扰所致,干脆全部注释掉了再看——终究还是不行。看了看自己以前所做页面的源代码,也看不出个所以然来 ,只好上网搜索。

有的说这个CSS是兼容浏览器的写法,也有说这个CSS在IE中不起作用的。

说兼容,我这次明明是写了一样的代码却不成;说不起作用,以前都这样写的却能正确显示。

终于找到了一篇文章让我找出了问题的根本,该文作者提到

CSS 兼容要点:DOCTYPE 影响 CSS 处理

我再比较了代码,确实这次没有在<html>标签之前加上<!–DOCTYPE ... –> ,于是把以前的文件中的复制了过来。再保存、刷新。果然就能正确显示了。到此终于弄明白了margin: 0 auto ;在IE中无效的真正原因。

对于前面提到的两种说法,原来都可以说是正确的,只是没有说清楚前提,或者作者根本没意识到有这么个前提 ……其实细想之下,出现这种情况也在情理之中,DOCTYPE中可供选择的规范有很多,但很少有人去关心这些规范之间的差别,很多网页制作工具都能自动生成这一行,就算用文本编辑器写页面的人,也不至于把这些规范的写法都背下了,总是要的时候去以前的代码,或者随便打开个网页,把头几行内容都复制过来,慢慢再改。再加上现在的浏览器的超强容错性,大家就不去在意这些了……

浙ICP备15043004号-1