内联块非常好用.想象一下,我想把几个div放在中心,而不是摆弄一些margin-auto(当我们想要居中多个div时最终实际上不起作用),所有我必须做的就是给所有div内联块和将它们放在带有text-align：center的容器div中
我的意思是我只是给出了一个例子(我刚刚遇到)关于为什么内联块只是pwn.因此,内联块允许我们为内联元素提供填充和边距,同时我们不必为这些元素声明显式宽度.究竟是什么捕获在这里？我简直无法相信这是没有成本的.
解决方法
问题是对自然块级元素的IE6 / 7支持.如果在内联元素(如a或span)上使用内联块,它只能在第一次才能正确运行.
幸运的是,这可以通过使用hasLayout来解决(内联块很酷！) – 简而言之,一旦他们已经触发了hasLayout(原始内联块规则可以执行),就会重新显示块显示为内联
另一个问题是内联块自然应该在它们之间有空格,就像句子中的单词一样,实际上它们在大多数浏览器中都有,但你已经猜到它不在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; /* this is the easiest cross-browser fix to zero the whitespace between blocks */
}
.foo,.bar {
/* THE IE workarounds,must come after the above rule */
/* note this is a hack.. the !ie7 part..
you could put this rule set in a conditional
or use your favourite method to Feed to LTE IE 7 */
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>
