之路

之路 前端开发, 随记

关于启用html5 dtd后产生的问题之前看到有一个，是关于img元素的，详见受doctype影响的内嵌img标签的td高度以及解决HTML5中图片元素多出来的3.5px

最近自己又碰到一个，是关于html5的dtd下inline-block元素的margin负值问题。

此问题截图及demo

此问题存在于IE8/FF/OP/SA/chrome中

正常情况下应该是：

如果是xhtml transitional类型的声明，则在IE6/IE7/IE8/FF/OP/SA/chrome中都没问题
详见xhtml transitional demo

既然和dtd声明有关，又继续使用了xhtml strict类型和xhtml 1.1声明，发现在IE8/FF/OP/SA/chrome下都有和html5下相同的问题，详细demo如下：
xhtml strict demo
xhtml 1.1 demo

从以上得知，在IE8/FF/OP/SA/chrome下问题存在于 html5 dtd/xhtml strict dtd/xhtml 1.1 dtd的情况下。在这些前提下的一个共性是IE8/FF/OP/SA/chrome都被触发了“标准模式”，而没有问题的IE6/IE7被触发了“接近标准模式”，详见浏览器的内核及渲染模式。

这很有可能是问题所在，但是根本的原因及不同渲染模式对哪些标签及样式渲染有差异(差异是什么)仍然没有详尽的资料，需要不断摸索。

最后提供一种解决方法(仅供参考)：给元素添加float
问题解决后的demo

测试浏览器为：IE6/IE7/IE8/FF 3.6.16/Opear 11.10/Safari 5.0.2/chrome 10.0.648.204

之路 前端开发