IE8 及以下内联块 CSS答案

【问题标题】：IE8 and Below inline-block CSSIE8 及以下内联块 CSS
【发布时间】：2013-02-16 03:27:27
【问题描述】：

所以我知道 IE8 及更低版本不喜欢 inline-block 但我读到 inline 应该会导致相同的行为。所以我修改了将我的main.css 复制到main-ie8below.css 并将所有inline-block 更改为inline。我使用以下代码来尝试实现这一目标：

        <!--[if lte IE 8]>
            <link rel="stylesheet" type="text/css" href="/media/css/main-ie8below.css" />
        <![endif]-->
        <!--[if gt IE 8]>
            <link rel="stylesheet" type="text/css" href="/media/css/main.css" />
        <![endif]-->
        <!--[if !IE]><!-->
            <link rel="stylesheet" type="text/css" href="/media/css/main.css" />
         <!--<![endif]-->

但是，这不起作用。看来我的 if 语句不正确。是这样吗，还是我错过了什么？

这是有问题的 HMTL（删除了无用的东西）：

    <nav id="main_nav" role="navigation"><!--
                            <div><a href=""><img src=""  /></a></div><!--
                    --><div><a href=""><img src=""  /></a></div><!--
                    --><div><a href=""><img src=""  /></a></div><!--
                    --><div><a href=""><img src=""  /></a></div><!--
                    -->

这是一个小提琴，除了没有图像：

http://jsfiddle.net/bqXsU/

【问题讨论】：

在处理 IE 功能检测时，我认为最好的方法是坚持 HTML5 样板方式：    <html class="no-js">  并在您的 main.css 中为 .lt-ie8 .my-inline-block-element{} 添加规则
究竟是什么不起作用？截图或 jsfiddle 会很有帮助。
我怀疑您的问题可能是没有添加填充/边距（它们不适用于内联元素）虽然我不知道 IE8 及以下版本的缩放，但很可能是你的问题也是

标签： html internet-explorer css

【解决方案1】：

你需要这样使用：

display: inline;
zoom: 1;

我猜你错过了zoom: 1 部分。如果您要与适用于所有 IE 版本和现代浏览器的现有样式表耦合，那么最好使用这种方式：

display: inline-block;
*display: inline;
*zoom: 1;

但问题是，您的 CSS 可能无法验证。

我不明白，哪一部分是你不明白的。让我解释一下我使用的三个东西。

Star Hack：在样式规则前面添加*，将使其仅对 IE 7 及更低版本可见。
验证问题：规则 *zoom 和 *display 不是有效的 CSS 属性。
这是如何工作的？ 在 IE 7 及更低版本中，此 zoom: 1; 将触发元素的 hasLayout 属性，从而使其可用于 width、height、margin 和padding。

【讨论】：

您能否更详细地解释一下最后一部分？
@thatidiotguy 添加了解释。如果您有什么不明白的地方，请让我知道。 :)
不幸的是，它没有为 IE8 修复它，我发布了我使用 inline-block 的 html sn-p。它本质上是一个水平导航栏
@thatidiotguy IE 8 实际上喜欢inline-block。 :) 我不知道为什么它不适合你。
好的，我要整理一个小提琴来展示我在做什么，也许会重新提问，谢谢你的帮助

【解决方案2】：

原来是 IE8 无法识别 HTML5 元素的问题。通过添加 HTML5shiv 我能够修复它。

【讨论】：