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

Question

内联块非常好用.想象一下,我想把几个div中心,而不是摆弄一些margin-auto(当我们想要居中多个div时最终实际上不起作用),所有我必须做的就是给所有divs inline-block和将它们放在带有text-align:center的容器div中

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

Answer 1

问题是自然块级元素的IE6/7支持.它仅得到它的权利第一次如果inline-block是像一个内联元件上使用的a或spanBUT ..

幸运的是,这可以解决(内联块很酷!)通过使用hasLayout - 简而言之,重新声明块显示为inline一旦他们已经触发了hasLayout(原始inline-block规则可以)

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

有几种方法可以控制这种差距,字间距可以说是最合理的,但并非所有浏览器都同意这一点,所以我发现最稳定的跨浏览器方式是使用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>