问题在于IE6/7对自然块级元素的支持。如果在内联元素上使用inline-block
,如a
或span
,它只会在第一次正确显示,但是...
幸运的是,这可以通过使用hasLayout来解决(inline-block很酷!)-简而言之,重新声明块的显示为inline
,一旦它们已经触发了hasLayout(原始的inline-block
规则也是如此)
另一个问题是inline-blocks
通常应该像句子中的单词一样在它们之间有空格,大多数浏览器确实如此,但是你猜对了,在IE中不是这样。因此,当您尝试将框完美地侧面对齐,就像它们被浮动一样,您必须允许这个空格,但在IE中不需要。
有几种方法可以控制这个间隙,其中
word-spacing可能是最合理的一种,但并非所有浏览器都同意,所以我发现最稳定的跨浏览器方法是使用
margin-right: -4px;
,这意味着您可以使用第二种IE6/7的解决方法(因为它没有这些间隙)将其右边距重置为
0
。噢,在HTML中的空格有时也会带来一些问题。
以下是一个片段,我尝试测试并融合了IE修复程序,它在各种浏览器上似乎运作良好,它还测试了HTML中的空格问题(无论如何我都无法重构它,但在几周前我最初测试此代码时存在该问题)。
CSS:
#wrapper {
background: #eee;
width: 200px;
padding: 1px 0;
}
.foo, .bar {
display:inline-block;
width:98px;
background: #eee;
color:white;
text-align:center;
font-size: 30px;
font-family: "trebuchet ms", georgia;
margin-right: -4px;
}
.foo, .bar {
display: inline !ie7;
margin-right: 0 !ie7;
}
.foo {border: 1px solid #000;}
.bar {border: 1px solid #f00;}
p {margin: 0;}
.wrap {margin: 20px 0;}
HTML
<div id="wrapper">
<div class="wrap">
<p class="foo"> Foo </p>
<p class="bar"> Bar </p>
</div>
</div>