内联块在 Internet Explorer 7、6 中不起作用

Posted 2023-03-05

【中文标题】内联块在 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。在这里，您可以放置​​您的背景颜色代码。有时，您不会在屏幕上看到布局，例如，列表项不会出现在屏幕上。然后，在这种情况下，它的效果很好，并且会像在其他浏览器中一样显示。