Html 我如何可以覆盖“引用”；显示：内联块“；加上；显示：block"；在IE7中？

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

我有一个特定类型的链接，在大多数情况下需要渲染为内联块，但在特定情况下需要渲染为块元素。具体地说，我希望它们各自出现在自己的行上，占据包含div的整个区域。在这种特殊情况下，包含链接的

div

被设置为浮动，因此它将根据其中最大的链接调整自身大小。IE8、IE9、Firefox和Chrome都能正确呈现这些链接，但无论我做什么，IE7都不会忘记

display:inline block

规则

---

如何使IE7以“块”模式显示这些元素？

您可以将IE7的样式放在单独的CSS中，并使用一个仅包含IE7的样式

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

---

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

显示：对于默认情况下未内联的元素，内联块在IE7中不兼容，因此IE将忽略此规则。例如，如果您将DIV更改为SPAN，则此示例应该可以使用。
更新：从注释移到此处：

问题在于
div
浮动。当您浮动一个元素时，它将在页面正常流之外，因此，
IE
将接受它
width:0；身高：0高度和
宽度，浮动的元素会被渲染成如何推动它们（我的英语很差，很抱歉）。第一步，
A
是
内联块
，因此它的
高度
例如是
x
。当你让它
块
时，它应该填充它的父对象，但是在
IE
中，它的父对象有
宽度：0
。因此，您应该从
div.ib a
中删除第一个
内联块
属性，或者可以为浮动
div
元素创建一个固定宽度属性

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

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

另一种方法（如果可以并且您的解决方案允许的话）是将第一个
内联块
更改为
内联
，只用于
IE
：

display: inline-block; 
*display: inline; 

但是
width
解决方案（用于
div
）更标准、更灵活

结束更新

但是，要在
IE
中重写
css属性
，有3种可选方法：

第一种方法是使用条件注释，使其内容仅对
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]-->


我知道的第三种方法是使用
IE
专用css属性：

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



如果您对任何部分有任何问题或需要澄清，请告诉我。
简单地说，我将替换所有的
显示：内联块使用
显示：内联，我也有条件地这样做，正如上面提供的答案一样

以您为例，我发现以下几点是成功的：

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

Jsfiddle：

对于IE7，它看起来像：

*display: inline;
zoom: 1

与此相应，
display:inline block
具有与IE7中的
display:inline
类似的行为，因此您只需稍作更改即可支持IE7（使用）：

我希望能像你期望的那样工作


编辑：

嗯。问题在于该属性的布局。
zoom:1
和
height:any_值
都会激活hasLayout，因此同时
显示：内联块*display:inline
用于覆盖下一个
display:block
声明，放置
高度：30px
（例如）将返回属性hasLayout。因此，要做的事情是删除hasLayout，如中所述

我必须展示它是如何工作的。因为
高度
实际上是不可触摸的，我使用
填充底部
和
字体大小
来模拟其他浏览器中的
高度
。请注意，保持最宽元素的
宽度


EDIT2:

你有没有考虑周全的解决方案？（在IE7中只给元素不同的
宽度
s）
看起来就像完成了任务。
我正在编写您的代码，请尝试：

这一行的秘密：
div.ib a{display:inline block；*display:inline；}
您的问题是
hasloayout
设置触发了
inline block
。引用（我的重点补充）：

显示属性不同：“内联块”设置haslayout=true时，稍后不会通过在另一个规则集中用“块”或“内联”覆盖该值而将该标志重置为false。”

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

有点像我将
blockbyclass
替换为
inlinebyclass
（实际上是
inlineblock
）

更新的解释：您可能注意到，当您从
内联块
切换到
块
时，它“有点起作用”（文本行仍向下移动）。这是因为它显示为一个块，但它有布局，而不是没有布局。我不知道你的具体情况，但如果你能在包含
div
的页面上设置
width
，那么我在上面提出的“反向思考”的第二个解决方案是，在将
width:100%
与“重置”到
块的同时，设置
width:100%
，比如
body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;display:block;}

display: inline-block 

*display: inline;
zoom: 1

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

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

.ib a {display:block;}

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