Question

内联块非常好用。想象一下，我想把几个div放在中心，而不是摆弄一些margin-auto（当我们想要居中多个div时最终实际上不起作用），所有我必须做的就是给所有div 内联-block 并将它们放在容器div中 text-align：center

我的意思是我只是给出了一个例子（我刚刚遇到的）为什么内联块只是pwn。因此，内联块允许我们为内联元素提供填充和边距，同时我们不必为这些元素声明显式宽度。究竟是什么捕获在这里？我简直无法相信这是没有成本的。

Answer 1

对自然块级元素的捕获是IE6 / 7支持。如果在inline-block或a等内联元素上使用span，那么它只能第一次

这可以通过使用hasLayout幸运地解决（内联块很酷！） - 简而言之，一旦他们已经触发了hasLayout（原始inline，将块显示为inline-block。规则确实）

另一个问题是inline-blocks自然应该在它们之间有空格，就像句子中的单词一样，实际上它们在大多数浏览器中都有，但你猜不到它在IE中。所以当你试图将盒子完美地并排放置时，好像它们是浮动的，你必须允许这个空间，但不能在IE中。

有几种方法可以控制这种差距，word-spacing可以说是最合乎逻辑的，但并非所有浏览器都同意这一点，所以我发现最稳定的跨浏览器方式是使用{ {1}}这意味着您可以使用IE6 / 7的第二种解决方法（因为它没有这些间隙）将其右边距重置为margin-right: -4px; - 哦，HTML中的空格有时也会引发曲线球

这是一个片段，我尝试测试结合IE浏览器，它似乎在浏览器中运行良好，它还测试HTML问题中的空白（我无论如何都无法重建......但是当我最初测试这个时几个星期前的代码）

<强> CSS：

<强> HTML

#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;}

Answer 2

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

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

Firefox 2中的可怕行为（不再是那么大的交易）。

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

Answer 3

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

使用内联块的问题是什么？

3 个答案: