html里面内联是什么意思,html – 使用内联块的问题是什么？

问题是对自然块级元素的IE6 / 7支持.如果在内联元素(如a或span)上使用内联块,它只能在第一次才能正确运行.

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

Foo

Bar