好吧,真正要忧伤的东西来了。这是一个正常现象,只要用 display:inline-block 就会有这样的问题。因为 IE6~7 并不完全支持这个属性,所以不存在这样的问题。好吧,好像是因为空白引起的。如果把所有空白都删除了就没问题了。但这始终不是什么好办法。我们的解决方法是(多谢@鸽子一起解决这个问题):
@media screen and (-webkit-min-device-pixel-ratio:0){ #test{ /* 让 chrome 支持 12px 以下的字体 */ -webkit-text-size-adjust:none; } }
但是。问题是这个纠结的浏览器,竟然不认 font-size:0 这样的写法。还好经测试,幸运的是 font-size:1px 它认识,而且效果刚好是我们想要的:没有间隙。最终的代码是:
#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 同学和Justice 同学提供的更方便的方法,避免了 hack:
ul{ float: left; left: 50%; position: relative; } li{ float: left; position: relative; right: 50%; }
本文链接:http://www.blueidea.com/tech/program/2011/8295.asp
出处:幸福收藏夹
责任编辑:bluehearts
上一页 让不固定个数的子元素自适应居中 [1] 下一页
◎进入论坛网络编程版块参加讨论
|