关于 'display:inline' 的详细信息,请参考 W3C CSS 2.1 规范 9.2.4 The 'display' property。
Chrome 和 Safari 中标签紧密相邻的行内元素在折行显示时存在错误。
可能造成不同浏览器中标签紧密相邻的行内元素显示效果不一致。
Chrome Safari |
---|
这个问题是 WebKit 引擎在处理紧密相连的内联元素时存在自动换行计算上的 Bug 。
针对此问题,我们使用以下测试样例来说明,分析以下代码:
<body> <a>[a]</a><span>[span]</span><strong>[strong]</strong><i>[i]</i><b>[b]</b><big>[big]</big><small>[small]</small><em>[em]</em><dfn>[dfn]</dfn><code>[code]</code><samp>[samp]</samp><kbd>[kbd]</kbd><var>[var]</var><cite>[cite]</cite><abbr>[abbr]</abbr><acronym>[acronym]</acronym><sub>[sub]</sub><sup>[sup]</sup><bdo>[bdo]</bdo> </body>
减小浏览器窗口尺寸后,在各浏览器中表现如下:
Chrome Safari | IE6 IE7 IE8 Firefox Opera |
---|---|
通过上图比较可以发现,在非 WebKit 引擎的浏览器内,不管元素排列如何紧密,都可以随着布局大小自动换行显示; 而在 WebKit 引擎的浏览器中所有紧密相连的内联元素都在同一行显示,并且与文档模式无关。
避免出现紧密连接的内联元素标签,可以在每个标记之间加入空格或者换行符来避免这个问题。
操作系统版本: | Windows 7 Ultimate build 7600 |
---|---|
浏览器版本: |
IE6
IE7 IE8 Firefox 3.6.8 Opera 10.60 Chrome 6.0.472.0 dev Safari 5.0(7533.16) |
测试页面: | webkit_inline.html |
本文更新时间: | 2010-07-28 |
inline auto-inline-feed 标签紧密相邻 行内元素 换行