Rainux's Weblog

这个问题其实纯粹是 IE 的问题和 CSS 的技巧问题，不过因为我是在调整 WordPress 的 style 时遇到并解决的，所以就归类到 WordPress 里了。

以前就听说 IE 对 CSS 支持不太好，特别是有关盒式模型的。不过由于我几乎不做网页，所以也没留意过。最近因为给 blog 添加那个“访客来源”显示，才注意到这个。 问题描述：对于几个相邻的 div 元素，如果使用了一些比较复杂的 CSS 来排版定位，特别是这些 div 元素的 CSS 里都有 padding 属性时，在 IE 中有可能会造成 div 相邻的边界出现很莫名其妙的绘图错误，而 Firefox 里没有这个问题。(如果你有兴趣，可以把偶这个 blog 的首页源代码保存为 UTF-8 编码的 HTML 文件，然后用文本编辑器打开它，搜索“<!--修正 IE padding 问题-->”，把它前面那个 &nbsp; 去掉，然后用 IE 打开，拖动滚动条到页面底部，分别按一次 Page Up、Page Down，就可以看到我所谓的“绘图错误”了。)

可能上面这段话是我平生最烂的问题描述了，因为我没有正式的学过 HTML 和 CSS，只是看过一些比较权威的参考手册(Reference)，所以也没有对这个问题进行深入研究。不过我可以确定跟 padding 有关，因为我取消了那几个 div 的 padding 后，就不会有这个绘图错误，就算是再加上 margin 也不会有问题。

我的解决办法也比较拙劣，至少我是这么认为的。因为当时我发现在相邻边界出现问题的两个 div 元素中，靠前的那个(当然是指在 HTML 代码里)里面全是块级元素(block-level elements)，没有一个内联元素(inline elements)。我就尝试性的在前面的 div 里加了个空格 &nbsp;，结果问题就解决了，呵呵。

其实问题是在几天前解决的，当然，在当时我并没有块级元素和内联元素的概念，是刚刚搜索 CSS 相关的东西时看到的。刚才又试了一下，用 height 和 width 都为 0 的内联元素 img 去代替 &nbsp; 同样也可以让 IE 正常显示，不过这样似乎有滥用 HTML 元素之嫌。