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

幸运的是,这可以通过使用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>