关于display：inline-block的讨论与问题

[w250840443]

废话不多说，直接上代码：

/* font-size：0;letter-spacing：-6px;解决换行间距bug 火狐私有 display：-moz-inline-box */
.gib {position: relative;display: -moz-inline-box;display: inline-block; font-size:0px; letter-spacing:-6px;}
/* IE hack */
* html .gib {display: inline;}
*:first-child+html .gib {display: inline;}

各位大侠，求原理，网上貌似大家都是这样说的，但是我布局起来 IE是和平了 Chrome 和 火狐倒是不太平了，这是什么情况？

[bhbhxy]

都不知道你想干吗

[APM60-]

ie下的样式前面加个*试试，类似：

width:450px;/*for firefox*/
*width:470px;/*for ie7 & ie6*/

这个能区分ie和ff。
Chrome不太清楚

[w250840443]

我想兼容火狐 IE 和 谷歌[Quote=引用 1 楼 bhbhxy 的回复:]

都不知道你想干吗
[/Quote]

[w250840443]

这是google的display:inline-block的CSS布局代码

/*
* Default rule; only Safari, Webkit, and Opera handle it without hacks.
*/
.gib {
position: relative;
display: -moz-inline-box; /* Ignored by FF3 and later. */
display: inline-block;
font-size:0px;
letter-spacing:-6px;
}

/*
* Pre-IE7 IE hack. On IE, "display: inline-block" only gives the element
* layout, but doesn't give it inline behavior. Subsequently setting display
* to inline does the trick.
*/
* html .gib {
display: inline;
}

/*
* IE7-only hack. On IE, "display: inline-block" only gives the element
* layout, but doesn't give it inline behavior. Subsequently setting display
* to inline does the trick.
*/
*:first-child+html .gib {
display: inline;
}

貌似我用起来 会有很多问题

[fenjin147]

你的html呢？只有CSS怎么知道你想达到什么效果？

[w250840443]

.cBox{ margin-left:auto; margin-right:auto;}
.cBox{ width:730px; height:452px; padding:5px 5px 5px 5px;}
.left{ width:200px; height:450px; margin-left:5px;}
.mid{ width:300px; height:450px; margin-left:5px;}
.right{ width:200px; height:450px; margin-left:5px;}

<div class="cBox">
<div class="c gib">
	<div class="left gib"></div>
    <div class="mid gib"></div>
    <div class="right gib"></div>
</div>
</div>

我想用这个实现1行三列的布局效果
[Quote=引用 5 楼 fenjin147 的回复:]

你的html呢？只有CSS怎么知道你想达到什么效果？
[/Quote]