line-height IE中的一点问题
对于单行元素设置垂直居中，我们经常通过将line-height设置成和其父级元素相同大小来实现。
但当单行元素设置浮动时，在ie中似乎有点小问题
问题一：
<html>
<body>
<style type="text/css">
body{font-size:14px;}
ul{overflow:hidden;height:24px;border:1px solid #ccc;line-height:24px;}
li{list-style:none;float:left;}/*去掉float再试一下*/
</style>
<body>
<ul>
<li>校长在线</li>
</ul>
</body>
</html>
就可以看到当设置float时，在ie中元素有1px的偏下 。暂且可以通过设置*margin-top:1px;解决。
问题二：
<html>
<body>
<style type="text/css">
body{font-size:14px;}
ul{overflow:hidden;height:24px;border:1px solid #ccc;line-height:14px;}
li{list-style:none;float:left;}/*去掉float再试一下*/
</style>
<body>
<ul>
<li>校长在线</li>
</ul>
</body>
</html>
可以看到“校长在线”上部也有1px的隐藏，可以通过vertial-align:bottom;解决。
原来认为上面的两个问题有什么联系，可实验了一下，似乎并没什么联系。当line-height,和字高相等时就会出现第二个问题，当line-height大于字高时第二个问题就不存在了。