所以我知道 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 ,除了没有图像:
最佳答案
你需要这样使用:
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
。
关于html - IE8 及以下 inline-block CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14898928/