内联块在 Internet Explorer 7、6 中不起作用
Posted
技术标签:
【中文标题】内联块在 Internet Explorer 7、6 中不起作用【英文标题】:Inline block doesn't work in internet explorer 7, 6 【发布时间】:2011-08-15 20:35:23 【问题描述】:我有这个带有inline-block
的CSS 代码。谁能告诉我如何让它在 Internet Explorer 6 和 7 中运行。有什么想法吗?也许我做错了什么?谢谢!
#signup
color:#FFF;
border-bottom:solid 1px #444;
text-transform:uppercase;
text-align:center;
#signup #left
display: inline-block
#signup #right
background-image:url(images/signup.jpg);
border-left: solid 1px #000;
border-right: solid 1px #000;
display: inline-block;
padding:1% 2%
width:16%;
#signup #right a font-size:100%; font-weight:bold
#signup #right p font-size:90%; font-weight:bold
#signup a:hover color:#FFF; text-decoration:underline
【问题讨论】:
【参考方案1】:在 IE6/IE7 中,display: inline-block
仅适用于 自然 内联的元素(例如 span
s)。
要使其适用于其他元素,例如 div
s,您需要这样:
#yourElement
display: inline-block;
*display: inline;
zoom: 1;
*display: inline
使用“安全”CSS hack 来应用于only IE7 and lower。
对于 IE6/7,zoom: 1
提供 hasLayout。拥有“布局”是display: inline-block
始终工作的先决条件。
可以在保持有效 CSS 的同时应用此解决方法,但这并不值得考虑,尤其是在您已经使用任何供应商前缀属性的情况下。
Read this 了解有关display: inline-block
的更多信息(但忘记-moz-inline-stack
,这只是现在古老的 Firefox 2 所需要的)。
【讨论】:
我已经阅读(但无法测试)您也应该设置_height: ###px
,这只有IE6及以下版本才能理解。假设你仍然关心一个正式死掉的浏览器,那就是。
一篇关于这个问题的好文章,还涵盖了 Firefox 2 和 IE5.5 & 6:blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block
使用这些技巧的一个警告是,我们不知道未来的浏览器将如何解析前面的星号。我会规则使用条件 IE 语句作为单独的样式表,这将有助于这些黑客攻击。
@JackWilliams:所有明智的“未来浏览器”都会进行单元测试,以防止出现问题。 Here's 一个随机的 WebKit ,例如。您不必担心,没有新的浏览器会接受带有垃圾前缀的属性。【参考方案2】:
*display:inline
可以作为 IE7 hack 正常工作。但是,您可以将zoom:1
添加到代码中作为*background:#fff; *display:inline; zoom:1
。在这里,您可以放置您的背景颜色代码。有时,您不会在屏幕上看到布局,例如,列表项不会出现在屏幕上。然后,在这种情况下,它的效果很好,并且会像在其他浏览器中一样显示。
【讨论】:
以上是关于内联块在 Internet Explorer 7、6 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
为啥内联“背景图像”样式在 Chrome 10 和 Internet Explorer 8 中不起作用?
SASS 3.2 媒体查询和 Internet Explorer 支持
在同一台计算机上运行 Internet Explorer 6、Internet Explorer 7 和 Internet Explorer 8
为啥在安装Windows Internet Explorer 7的时候,提示"此操作系统不支持Windows Internet Explorer 7.