内联块在 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 仅适用于 自然 内联的元素(例如 spans)。

要使其适用于其他元素,例如 divs,您需要这样:

#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.

需要一个好的 Internet Explorer 6、7、8 独立版 [重复]

Internet Explorer 7中的CSS背景大小封面[重复]