IE8及以下inline-block的CSS(IE8 and Below inline-block

2019-08-17 00:03发布

所以,我知道,IE8及以下不喜欢inline-block ,但我读了inline应该产生相同的行为。 所以我修改复制我main.cssmain-ie8below.css和改变了这一切inline-blockinline 。 我使用下面的代码,试图做到这一点:

        <!--[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可能不验证。


我不明白,这部分是一个你不明白。 让我解释一下我用了三两件事。

  1. 星哈克:前面加上一个*的样式规则的前面,将使其只对IE 7和下清晰可见。
  2. 验证问题:规则*zoom*display是无效的CSS属性。
  3. 这是如何运作的? 在IE 7及以下,此zoom: 1; 将触发hasLayout元素的属性,从而使得可用的widthheightmarginpadding


Answer 2:

它原来是不被认可的IE8 HTML5元素的故障。 通过添加HTML5shiv我能解决它。



文章来源: IE8 and Below inline-block CSS