使用内联块有什么用处？

Question

内联块非常好用。想象一下，我想集中几个div，而不是摆弄一些margin-auto（当我们想要居中多个div时，最终实际上不工作），我只需要给所有这些div分配inline-block并把它们与文本对齐一个div容器：中心

我的意思，我只是给了为什么直列块只是PWN一个例子（我只希望碰到）。因此，内联块允许我们给填充和边距内联元素，同时我们不必为这些元素声明明确的宽度。这里的确切点是什么？我简直不敢相信这是没有代价的。

Answer 1

该捕获是对自然块级元素的IE6/7支持。它只是变得如果inline-block就像a或span而是一个内联元素..

这可以围绕幸运（直列块爽！）利用hasLayout的待加工使用它的权利第一次 - 总之重新声明的块显示为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; /* 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> 

Answer 2

过去的浏览器支持很差。现在的支持是很好的，所以除非你需要支持旧的浏览器，否则就去做吧。

Answer 3

我爱他们，以及但是有些问题是：

在IE6和IE7很奇怪的行为（可能仍然是一个大问题）。

Firefox 2中的糟糕行为（不再那么重要）。

而且，IE6和IE7只能将自然“内联”（如跨度）的内容更改为“内联块”，如果某些内容自然是“阻止”（例如div），则不能。