li 的空白间距
看下面的代码:
<div> <ul> <li><img src="li.gif" alt="li" /></li> <li><img src="li.gif" alt="li" /></li> <li><img src="li.gif" alt="li" /></li> <li><img src="li.gif" alt="li" /></li> <li><img src="li.gif" alt="li" /></li> <li><img src="li.gif" alt="li" /></li> </ul> </div>
li.gif 是一个宽 150px、高 50px 的纯色 #009999 的图像。效果如下:
每个 li 之间有间距,IE、Firefox、Chrome 中均是如此。可能绝大多数第一感觉是:噢,设置 margin、padding 为 0 解决。可是我们设置了 *{margin:0px;padding:0px;},仍然不奏效。
那么会不会是 </li> 与 <li> 之间的空白字符在作怪呢?我们把上述代码弄成一行,仍然不奏效。
方法一、其实解决办法是给 li 指定 height,比如下面的代码:
li { height:50px; vertical-align:middle; }
在 Firefox、Chrome 中只需要 height 这一行就够了,而 IE 单这个还不行,还需要 vertical-align:middle。说明一下 vertical-align,并不是必须指定为 middle,指定 top、bottom 也是可以的。不要指定为 baseline,baseline 是默认值,指定 baseline 就相当于没指定一样;不要指定为 text-top、text-bottom,这样表面上看起来没间距了,实际这个 ul 总共高度都变了,与想要的效果完全不同。
方法二、给 li 指定 line-height:0px;
这个在标准浏览器中测试可行,但我没在 IE 中测试过。
这种方法有个好处,就是无法预知 li 高度的情况下可用。
a 的空白间距
a下面有 img,但是 a 的高度居然比 img 多一点点。
方法一、给 a 指定 font-size:0px;
方法二、给 a 指定为 block,并 line-height:0; 试试。