如何在IE7中用“display：block”覆盖“display：inline-block”？

时间：2011-11-08 21:24:36

标签： html css internet-explorer-7

这里有一些代码来说明我遇到的问题。 jsFiddle Demo 

<div class="normal">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib blockbyclass">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;}
div.ib a {display: inline-block;}
div.normal > a {display: block;}
div.blockbyclass> a {display: block; }

我有一种特定类型的链接，在大多数情况下需要将其呈现为内联块，但在某些情况下需要呈现为块元素。具体来说，我希望它们各自出现在自己的行上并占据包含div的整个区域。在这种特殊情况下，包含链接的div设置为float，因此它将根据其中最大的链接调整自身大小。 IE8，IE9，Firefox和Chrome正确呈现这些链接，但无论我做什么，IE7都拒绝忘记display: inline-block规则。

如何让IE7以“阻止”模式显示这些元素？

11 个答案:

答案 0 :(得分：5)

更新：从此处的评论中移除：

问题在于div浮动。当你浮动一个元素时，它将位于普通流的页面之外，因此，IE将使用它width:0; height:0;，当你在其中放入一些元素时，它们将创建自己的height和width和浮动元素将被渲染如何推动他们（我的英语非常糟糕，很抱歉）。第一步，A为inline-block，因此其height例如为x。当你创建它block时，它应该填充它的父级，但是，在IE心中，它的父级有width:0。因此，您应该从inline-block 删除第一个div.ib a属性或，您可以为浮动的div元素创建固定宽度属性。 

div { float: left; margin: 5px; width: 80px; }

另外，据我所知， W3C 建议浮动元素应具有固定宽度。 - IE 6 也需要一个固定的高度才能正常工作!!!

另一种方式 - ，如果可以，而您的解决方案允许 - 将inline-block更改为仅inline的{​​{1}}：

IE

但display: inline-block; *display: inline; 解决方案（适用于width）更具标准性和灵活性。

END UPDATE

但是，要覆盖div中的css-attribute，您有3种可选方式：

  1. 第一种方法是使用条件评论，使其内容仅对IE可见。一个完整的例子是这样的：

    IE

    如您所见，您有很多选项可以使用条件评论。

  2. 另一种方法是使用<!-- visible to IE less that 7 (6, 5, etc) --> <!--[if lt IE 7]> <link href="/Content/ie6.css" rel="stylesheet" type="text/css" /> <![endif]--> <!-- visible to IE 7 only --> <!--[if IE 7]> <link href="/Content/ie7.css" rel="stylesheet" type="text/css" /> <![endif]--> <!-- visible to IE 8 only --> <!--[if IE 8]> <link href="/Content/ie8.css" rel="stylesheet" type="text/css" /> <![endif]--> <!-- visible to IE 9 and above and also visible to other browsers --> <!--[if gt IE 8]><!--> <link href="/Content/normal.css" rel="stylesheet" type="text/css" /> <!--<![endif]--> 特殊选择器，使某些选择器对CSS可见，并将其隐藏在其他浏览器中。一个完整的例子是：

    IE

  3. 我知道的第三种方法是使用/* normal */ your-selector{ } /* visible to IE 6 only */ * html your-selector{ } /* visible to IE 7 only */ *:first-child + html your-selector{ } /* visible to IE 7 and above */ html > body your-selector{ } /* visible to IE 8 and above */ html > /**/ body your-selector{ } 专门的css-properties：

    IE

    4. 如果您对任何部分有任何疑问或需要澄清，请与我们联系。

答案 1 :(得分：4)

使用此article display:inline-block具有与IE7中的display:inline类似的行为，因此您只需支持IE7（使用simple hack for IE）即可进行更改： 

div.ib a {
   display: inline-block; 
   *display: inline; /* IE7 and below */ 
}

我希望this按预期工作。

修改

确定。问题是属性hasLayout解释here。 zoom:1和height:any_value都会激活hasLayout，因此同时display:inline-block; *display:inline会覆盖下一个display:block声明，而height:30px（例如）会返回属性hasLayout 。所以要做的就是删除this article中所说的hasLayout。

我有this demo来说明工作原理。由于height实际上是不可触及的，因此我使用padding-bottom和font-size来模拟其他浏览器中的height。请注意，保留最宽元素的width。

<强> EDIT2：

您是否考虑过jQuery解决方案？ （仅在IE7中为元素提供不同的width）

答案 2 :(得分：1)

您可以将IE7的样式放在单独的CSS中，并使用conditional comment仅将其包含在IE7中。

<!--[if IE 7]>
<link ...your IE7 specific stylesheet goes here ... >
<![endif]-->

确保这段代码位于常规css文件的链接下方。

答案 3 :(得分：1)

display: inline-block
IE7的

看起来像：

*display: inline;
zoom: 1

答案 4 :(得分：1)

您的问题是hasLayout设置的inline-block触发器。引用http://www.satzansatz.de/cssd/onhavinglayout.html（我的重点补充）：

“display-property不同：''inline-block'设置haslayout = true，以后通过用另一个规则集中的'block'或'inline'覆盖值，该标志不会被重置为false “

这与大多数可以重置的hasLayout触发器不同。因此，我认为要解决你的问题，你需要反过来思考。您需要block作为a标记的默认值，然后添加一个类，以便在需要时获取inline-block。

类似于http://jsfiddle.net/mmpX3/33/，其中blockbyclass我替换为inlinebyclass（真的是inline-block）。

更新说明：您可能已经注意到，当您从block转到inline-block后，它“有点工作”（文字行仍向下移动） 。那是因为它显示为一个块，但是hasLayout而不是width。我不知道您的具体情况，但如果您可以在包含div上设置 width: 100%，那么我上面提到的“反向思考”的二级解决方案然后将block与“重置”同时设置为a，如下所示：http://jsfiddle.net/mmpX3/64/。

已更新警告：我不知道您是否计划将其他css应用于hasLayout代码，但如果其中任何一个触发block，那么您将需要注意（也许找到一种不同的方法）。例如，请参阅此小提琴http://jsfiddle.net/mmpX3/69/，其中所有内容都设置为min-height，但由于我在a标记上添加了{{1}}，因此它仍然存在与原始问题相同的问题

答案 5 :(得分：0)

display: inline-block在IE7中与默认不内联的元素不兼容，因此IE将忽略DIV的此规则。例如，如果您将DIV更改为SPAN，则此示例应该有效。

答案 6 :(得分：0)

这就是事情：如果你需要a标签锚点在他们自己的行上呈现，它们是块元素，而不是内联...事实上，你所说的并不代表需要对于内联块。你的divs是浮动的，所以它们会堆叠在一条线上（但不是内联的;它们在文档的流程之外，因此float）。

试试这个......让我们把它全部拆掉。这是您给我们的HTML：

<div class="normal">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib blockbyclass">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>
<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

使用你提供的CSS，在Safari和Firefox中，我看到三个块，每个块有两个链接，每个块都在各自的行上。但是，您在IE7中看到的不是两个inline-block元素，而是两个inline元素 - 原因是IE7中不支持inline-block因为hasLayout错误（Microsoft为使一个简单的问题复杂化而创建的错误）。换句话说，它不会忘记inline-block，因为它根本不理解inline-block（您必须误解），并且正在通过其默认显示行为来处理a（即inline）。

如果他们需要在单独的行上占据容器的宽度，那么你所要做的就是这个（在.ib a上演示，完全忽略了blockbyclass，这似乎只是一个红色在这种情况下鲱鱼）：

.ib a {display:block;}

TADA！宽度从父容器继承，a采用默认的a样式，一切都很开心。所以看看这个：

<div class="ib">
    <a href="#" style="display: block;">Test</a>
    <a href="#" style="display: block;">Test longer</a>
</div>

在这种情况下，这变得多余，因此是不必要的。你已经在制作这些元素了。

<div class="ib">
    <a href="#">Test</a>
    <a href="#">Test longer</a>
</div>

你只是简单地过度复杂化了。

这是一个小提琴：http://jsfiddle.net/dhYjZ/1/

答案 7 :(得分：0)

我不太确定你追求的最终结果是什么。您是否尝试将黑色背景设为整个矩形，封装两个链接而不是2个矩形（每个链接为1个）？

如果是这样，为什么不将背景应用于DIV而不是链接？

编辑： 似乎IE7存在一个错误，当其中一个适用于该元素的规则具有block时，它会以inline-block和display: inline-block的混合显示元素，即使{的另一个值为{ {1}}优先。

如果您看到http://jsfiddle.net/P2N5c/16/，那么display的规则是第一个（如使用display: block规则的规则）或者是最后一个规则无关紧要

到目前为止，我不确定如何防止此错误，但您可以通过避免同时提供#blocky和ib的链接并仅为其提供使其成为阻止的类来绕过它。即不要给他们blockbyclass。不是添加类来切换DIV的状态，而是将另一个类替换为另一个类。

答案 8 :(得分：0)

float似乎应该归咎于此。并不是因为IE7没有将项目标记为block，我认为这是由于div float没有宽度。这可以在这里看到：

http://jsfiddle.net/mmpX3/129/

通常，在使用旧浏览器时，我发现＆lt; = IE7中的浮动元素往往需要固定的宽度设置以避免问题。

在您的情况下，我建议添加固定宽度作为JS Fiddle，或者如果不需要则删除float。如果我能看到浮动的div的用例，我可能会想出一个替代方案。

为什么float和display:inline-block的组合会阻止display:block被重新安置，我不知道。这听起来像是可以解决的典型IE7错误。

答案 9 :(得分：-1)

简而言之，我将display:inline-block;所有用法替换为display:inline;，我也会有条件地这样做，就像上面提供的答案一样。

通过您的示例，我发现以下内容取得了成功：

body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;display:block;}

Jsfiddle：http://jsfiddle.net/zL3Ea/

答案 10 :(得分：-1)

好像完成了工作。 我是你的代码，试一试：http://jsfiddle.net/Lkwzx/1/

此行中的秘密：div.ib a { display: inline-block; *display: inline; }

相关问题
最新问题