浏览器的CSS调用
最近在帮RM老师做一个“电子商务信息与安全”精品课程网站，从P图到搭建，全部都弄的七七八八后，最后发现了一个让人很纠结的问题——就是主页CSS在不同浏览器呈现的不同效果问题。由于我电脑用的是IE8和谷歌，所以测试的结果没问题，刚开始打开遨游出现了按钮重叠部分显示不了的问题，那是因为设置了li的margin属性，本来是想达到按钮重叠的效果的，可是由于遨游的内核还是用的IE7，所以就出现了背景图片重叠的部分显示不了的情况，如下：
这显的很不圆滑很不和谐，所以不得不研究研究。看能不能修改下CSS来解决问题，在网上找了很久，虽说没找到有效的解决办法，但还是得到了线索，把margin-bottom属性去掉（但是其实margin-bottom属性在IE8和谷歌浏览器都不会出现这种问题），修改下line-height属性。说到这就不得不介绍下line-height属性了，line-height在W3C的解释是：
设置行间的距离（行高），该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
据网上的评论可知，line-height属性难倒了很多人，因为它在浏览器的支持性上有所区别，特别是IE6，在IE8的效果是没问题的，可是当我在电子阅览室IE6测试时，却发现出现了被撑破背景图片的现象：
这就让我纠结不已，而且显示不了背景图片，最后找到的解决办法是在li里面加入height属性，然后逐渐调整height属性以及line-height属性的值达到自己想要的效果，不过还有一点很为难我的，就是IE6问题解决了，可是其他浏览器在IE6的CSS代码下又会出现过于重叠的效果，所以我找到了另外一个方法，在网页中根据浏览器的不同调用不同的CSS文件。
代码如下（记住CSS调用的代码都是放在<head><head/>标签间的）：
我网站上有解决办法，看看 http://www.i5good.com/index.php/2010/11/25/444.htm各浏览器Hack兼容总结一起学习！
[回复]
很多时候都是ie出问题。。。
[回复]
admin 回复:
十二月 15th, 2010 at 11:29 下午
IE6确实让很多人纠结，不过IE8做的挺好的，随着浏览器的层出不穷，现在不仅要考虑哪个浏览器主流，还要考虑到浏览器兼容问题啊呵呵
[回复]
网站还不错哦，不过是不是图太大了，有点慢额！
[回复]
admin 回复:
十二月 15th, 2010 at 11:27 下午
哈哈，谢谢夸奖，图大是一个原因，另外一个原因是服务器比较慢呵呵~
[回复]
我的IE也经常出现问题
[回复]
admin 回复:
三月 6th, 2011 at 2:44 下午
这也不能说是IE的问题，因为现在IE更新的速度很快，各种各样的浏览器也层出不穷，所以我一般是下载了好几个浏览器，坐网站的时候多个浏览器测试，一定要保证所有人打开时看到的都一样…IE6,7都是比较旧的，所以做出来效果经常和新的冲突
[回复]