如何处理不同浏览器之间的样式表的兼容性问题
IE 不支持 "min-height" 样式
本站是这样解决的:
.contents { ... ...; min-height:380px; ie-only:expression(this.style.height="390px"); }
兼容 IE 和 Mozilla 的 hr 定义
Mozilla 不支持 hr 的样式 "height: 1px", 本站是通过下面的定义取得兼容性的:
hr { height: 1px; border: 0; color: silver; background-color: silver; }
IE 不支持 CSS2 中定义的 "Attribute Selectors"
Mozilla 可以使用 input[type="submit"]{...} 这样的方式来定义特定 attribute 的 HTML 元素的样式, 但是 IE 并不支持, 不过, IE 支持 expression, 所以可以这样获得兼容性:
input { border:dotted 1px blue; ie-only:expression( this.style.border=(this.type=="submit")?"solid 1px darkred": (this.type=="reset") ?"solid 1px darkgreen": /*else ...*/ "dotted 1px blue" ); } input[type="submit"] { border:solid 1px darkred; } input[type="reset"] { border:solid 1px darkgreen; }一个例子页面:
att:StyleSheetCompatibilityTips.Attribute Selectors.html
在 PRE 标签中换行
默认情况下<PRE>的显示是不换行的, 不过几种浏览器都有自己的样式用于换行(CSS3中对这个有了明确的定义, 参见
http://www.w3.org/TR/css3-text/#white-space ), 跨浏览器的<PRE>换行样式可以这样定义:
/* Browser specific (not valid) styles to make preformatted text wrap */ pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }这个方法来自 Tero Karvinen (
http://www.iki.fi/karvinen ) 的文章"Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE"(
http://users.tkk.fi/~tkarvine/linux/doc/pre-wrap/pre-wrap-css3-mozilla-opera-ie.html )
