html - IE8 及以下 inline-block CSS

Question

所以我知道 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><!--
                    -->

这是一个 fiddle ，除了没有图像:

http://jsfiddle.net/bqXsU/

Answer 1

你需要这样使用:

display: inline;
zoom: 1;

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

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

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

---

没看懂，你哪一段没看懂。让我解释一下我使用的三个东西。

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