Posts Tagged ‘CSS’
用!important解决CSS兼容性问题
Friday, July 14th, 2006
我的另外一个Blog最近更换了主题，新的主题BroadLeaf代码相对简单，可定制性很强，布局也和我心意，试用期间遇到了不少Bug，还好在模版作者Brendan以及天佑的帮助下一一得到了解决。昨天又发现一个以前没有注意到的问题，这个问题和PHP或MySQL无关，而是一个CSS的浏览器兼容问题，也就是由于IE和Firefox对CSS样式表的解释差异导致了不同的浏览效果，以我的Blog为例，在Firefox（我基本上只用Firefox）下一切正常，但在IE下，却发现sidebar的右侧边缘文字被切去了一部分，如右图。仔细查看了主题模版的Style.css文件，发现问题可能出在对sidebar的布局定义中有这么一条“margin-right: -2em”，即文字内容与右侧边框的距离是-2em，于是IE就截去了部分文字:lol:，Firefox却可以正确解析这种Box重叠效果。尽管我自己已经基本抛弃IE了，但不得不为那些仍然为数众多的IE用户考虑，马上到网上搜索解决办法，于是找到了!important。
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，语法格式{ sRule!important }，即写在定义的最后面，比如{font-color: red !important;}，由于IE并不支持该语法，所以我们可以利用这一点解决部分CSS的浏览器兼容问题，对于我的Blog来说，需要将布局定义相关部分改为：{margin-right: -2em !important;margin-right: 0em;}，这样Firefox仍然使用前一部分的margin定义，而IE则使用后一部分margin定义，立即试用，果然在IE下浏览正常了:smile: