使用inline-block有什么需要注意的地方？

Question

行内块元素非常好用。想象一下，我想要居中几个div，而不是在一些margin-auto上纠结（当我们想要居中多个div时，实际上并不起作用），我所要做的就是给所有这些divinline-block属性，并将它们放在一个带有text-align:center属性的容器div中。

我的意思是，我只是举了一个例子（我刚刚遇到过）说明为什么inline-blocks如此强大。因此，inline-block允许我们对内联元素设置填充和边距，同时我们不必为这些元素声明显式宽度。这里的问题是什么？我简直不敢相信这是没有代价的。

- Pacerier

---

如果你觉得编写符合标准的代码非常容易，那么你就是一名网站开发人员。 - Tim Yates

Answer 1

问题在于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; /* 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> 

- clairesuzy

Answer 2

我也喜欢它们，但有一些问题：

在IE6和IE7中表现非常奇怪（可能仍然是一个大问题）。

在Firefox 2中表现很糟糕（不再是一个大问题）。

而且，在IE6和IE7中，你只能将自然“内联”（例如span）的东西更改为“内联块”，如果某些东西自然上是“块”（例如div），那么你就不能更改它。

- ADW

Answer 3

跨浏览器支持曾经很差。现在的支持很好，所以除非你需要支持旧浏览器，否则可以使用它。

- cbp