五月 27
五月 27th, 2010浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
Html/Css/PsCss - css hack8:24
1
Html/Css/PsCss - css hack8:24
CSS3发布有一段时间了，其中的新功能也是大家很期待的，但到什么时间才能广泛应用，这不是个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C 标准的旧阅读器的问题。虽然IE这些不符合标准的浏览器还在统领中国浏览器市场，但相信有一天，终究会被取代，因为社会是向前发展的。下边列表一些css3的新功能，相信你一定会感兴趣的。
圆角 这个功能已经在诸如 Mozilla, Webkit 等阅读器广泛运用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。
BUG描述：
页面中某div使用了position:relative，结合top=-25px等元素定位。在FF和IE7下表现正常，但是在IE6中该div会随鼠标滚动而滚动。
分析：
1、标准模式中的 IE 6&7 width 100% bug
http://www.99css.com/2009/07/ie-6-width-100-bug.html
2、漫画：混乱的标记语言XHTML2/HTML5
<div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180×95_071112_sr.jpg" /></div>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：
现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性（注：原来只有 Opera、Safari 支持），但 IE6、IE7 可以通过触发 hasLayout 来模拟，Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性。
在实际应用中 -moz-inline-box 会存在元素间的对齐等问题，虽然 Firefox 还有一个私有属性-moz-box-align 来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说 -moz-inline-stack 的表现更像 inline-block ，这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ，如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点，这个需要用 position:relative; 来解决。
<meta http-equiv="X-UA-Compatible" content="IE=5" />
像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。
2.<meta http-equiv="X-UA-Compatible" content="IE=7" />
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
1、仅 Safari 和 Opera 识别的 Hack
@media all and (min-width: 0px) {/* Safari and Opera rules here */}
或者
所有平台都预装的字体，被称为“安全字体”，因为它可以保证所有用户的视觉效果是一样的。
以下九种字体就是“安全字体”：Arial、Arial Black、Comic Sans MS、Courier New、Georgia、Impact、Times New Roman、Trebuchet MS和Verdana。