|
好吧，真正要憂傷的東西來了。這是一個(gè)正�，F(xiàn)象，只要用 display:inline-block 就會有這樣的問題。因?yàn)?IE6~7 并不完全支持這個(gè)屬性，所以不存在這樣的問題。好吧，好像是因?yàn)榭瞻滓鸬�。如果把所有空白都刪除了就沒問題了。但這始終不是什么好辦法。我們的解決方法是（多謝@鴿子一起解決這個(gè)問題）：
@media screen and (-webkit-min-device-pixel-ratio:0){
#test{
/* 讓 chrome 支持 12px 以下的字體 */
-webkit-text-size-adjust:none;
}
}
但是。問題是這個(gè)糾結(jié)的瀏覽器，竟然不認(rèn) font-size:0 這樣的寫法。還好經(jīng)測試，幸運(yùn)的是 font-size:1px 它認(rèn)識，而且效果剛好是我們想要的：沒有間隙。最終的代碼是：
#test{
display:block;text-align:center;
/* 解決間隙問題 */
font-size:0;
}
#test li{
display:inline-block;*display:inline;*zoom:1;
/* 解決不能水平對齊問題 */
vertical-align:top;
/* 解決間隙問題后遺癥解決 */
font-size:13px;
}
/* 讓 chrome 支持 12px 以下的字體 */
@media screen and (-webkit-min-device-pixel-ratio:0){
#test{-webkit-text-size-adjust:none;font-size:1px;}
}
好吧，好久沒寫 CSS 了。在想，如果有天我開始記憶力不好，忘記 CSS 是怎么寫的，怎么辦？會不會像《Boston Legal》的 Deny Crane 一樣抓狂。
UPDATE: 2011.1.25 21:15
多謝 Atrl 同學(xué)和Justice 同學(xué)提供的更方便的方法，避免了 hack：
ul{ float: left;
left: 50%;
position: relative;
}
li{
float: left;
position: relative;
right: 50%;
}
本文鏈接：http://m.95time.cn/tech/program/2011/8295.asp 
出處：幸福收藏夾
責(zé)任編輯：bluehearts
上一頁 讓不固定個(gè)數(shù)的子元素自適應(yīng)居中 [1] 下一頁
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 2 頁 讓不固定個(gè)數(shù)的子元素自適應(yīng)居中 [2]
