不同浏览器之间的兼容问题/

如何处理不同浏览器之间的样式表的兼容性问题

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;
}

在 PRE 标签中换行

默认情况下<PRE>的显示是不换行的, 不过几种浏览器都有自己的样式用于换行(CSS3中对这个有了明确的定义, 跨浏览器的<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+ */
}