如何在IE7中用"display:block"覆盖"display:inline-block"？

Question

这里有一些代码来说明我遇到的问题.jsFiddle演示

<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以"块"模式显示这些元素？

Answer 1

更新:来自此处的评论:

问题在于div浮动.当你浮动一个元素时,它将在页面普通流之外,因此,IE将采用它width:0; height:0;,当你在其中放入一些元素时,它们将创建它们自己的height并且width将呈现floated-element如何推动它们(我的英语真的很糟糕,很抱歉).第一步,A就是inline-block它height的例子x.当你做它block它应该填充它的父母,但是,IE记住,它的父母有width:0.所以你应该inline-block从div.ib a OR中删除第一个属性,你可以为浮动元素创建一个固定宽度属性div.

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

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

在另一种方式- 如果你能和你的解决方案可以让你 -是,改变先inline-block于inline只为IE:

display: inline-block; 
*display: inline; 

但width解决方案(for div)更加标准和灵活.

结束更新

但是,对于覆盖css-attributejust in IE,您有3种可选方法:

1. 第一种方法是使用条件注释,使其内容IE仅可见.一个完整的例子是这样的:

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

   如您所见,您有很多选项可以使用条件注释.

2. 另一种方法是使用CSS特殊的选择器,使一些选择器可见IE并从其他浏览器隐藏它们.一个完整的例子是:

   /* 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{
   }
   

3. 我知道的第三种方法是使用IE专门的css-properties:

   /* normal selector */
   your-selector{
       /* normal property, visible to all browsers */
       color: #FF0;
       padding: 20px auto 35px;
   
       /* use special properties in name/value for IE */
   
       /* visible to ie 6 only */
       _color: #FF0;
       _padding: 15px auto 30px;
   
       /* visible to ie 7 and below (7, 6, 5, ...) */
       *color:#FF0;
       *padding: 15px auto 30px;
   }
   

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

Answer 2

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

“显示属性有所不同：虽然‘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与不显示的块相反。我不知道你的具体情况，但如果你可以在包含上设置a ，那么我上面提出的“反向思考”的第二个解决方案是然后将 a与你的“重置”结合起来设置为，如下所示：http://jsfiddle.net/mmpX3/64/。widthdivwidth: 100%block

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