|
在写一个DEMO时，发现了一个问题。在google与IE高版本显示时，文字与边框都有一定的距离，没有进行任何设置。但是，在IE7中，文字与边框却没有了距离. 如下图所示：
图片：IE7.png 
最初样式代码： .classify dl dt{
float: left;
margin-left: 10px;
margin-right: 5px;
color:white;
width: 27px;
height: 42px;
text-align: center;
background-color: #00adf2;
font-size: 14px;
}
解决方案：猜想应该是不同浏览器的不同版本，默认文字的行高不一样。所以加了一个行高，但是文字间的距离一样，可文字与边框距离还是不一样。所以做了一个IE7 hack ，在IE7时，给上下加了2px的距离。下代码如下： .classify dl dt{
float: left;
margin-left: 10px;
margin-right: 5px;
color:white;
width: 27px;
height: 42px;
text-align: center;
background-color: #00adf2;
font-size: 14px;
line-height: 20px;
*height: 38px;
*padding:2px 0px;
}更新后的效果。如下图：
图片：IE7_hack.jpg
基本一致，不过仔细看还是有细微差别，如果还有有其它的办法，希望可以分享下 |
|
公众号
