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><!--
                    -->

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

http://jsfiddle.net/bqXsU/

Answer 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。

Answer 2

事实证明，IE5无法识别HTML5元素的错误。通过添加HTML5shiv，我能够修复它。

IE8和以下内联块CSS

2 个答案: