跨浏览器开发经验总结（二） CSS

CSS类级别的hack仅IE7识别 *+html {…}

IE6及IE6以下识别 * html {…}

opera、safari、chrome识别：

@media all and (min-width: 0px){…} //Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则

@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则

仅opera识别：

@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}

CSS属性级别的hack仅IE识别 ： margin-left:10px\9;

仅IE8识别 ： margin-left:10px\0;

IE6/IE7识别 ： *margin-left:10px;

仅IE6识别 : _margin-left:10px;

CSS Hack综合示例：

/**add 'margin-top: -10px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8 **/

.news_list01 h2 span{float: right; margin-top: 5px; *margin-top: -10px; display: inline}

@media all and (min-width: 0px){

.news_list01 h2 span{float: right; height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}

}

HTML代码片断级别的hack（仅IE识别）① <!--[if !IE]> 除IE外都可识别的代码片断<![endif]-->
② <!--[if IE]> 所有的IE可识别的代码片断 <![endif]-->
③ <!--[if IE 7]> 仅IE7可识别的代码片断 <![endif]-->
④ <!--[if lt IE 7]> IE7以及IE7以下版本可识别的代码片断<![endif]-->
⑤ <!--[if gte IE 7]> IE7以及IE7以上版本可识别的代码片断 <![endif]-->
用脚本设置CSS属性
设置元素的style样式
Var spanElement = document.getElementById(“mySpan”);
//下面写法保证出IE外，所有浏览器可用
spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
//下面的写法保证IE可用
spanElement.style.cssText=”font-weight:bold;color:red;”;
设置元素的class属性
Var element = document.getElementById(“myElement”);
//下面的写法保证除IE外，所有浏览器可用
Element.setAttribute(“class”,”styleClass”);
//下面写法保证IE可用
Element.setAttribute(“className”,”styleClass”);
具体CSS效果的实现
按钮悬停时鼠标呈现手的形状
cursor:hand和cursor:pointer效果是一样的，当鼠标移动至该元素时呈现手的形状。但是应该尽量使用cursor:pointer而非cursor:hand，因为cursor:hand只有IE识别，而cursor:pointer才是CSS2.0的标准属性，IE之外的浏览器也支持。
窗口滚动条显示问题
在使用弹出窗口或者框窗口架的时候，有时会有多余的滚动条出现，这时需要从多个方面进行确认：
弹出窗口时window.open方法参数中设置的窗样式是否定义了scroll=yes
框架标签的属性中是否设置了scrolling=“yes”
窗口或框架内页面的CSS中，是否对html或body的overflow进行了样式定义，如果没有请参考如下代码。

soft：自动软回车换行，换行标记不会传送到服务器端。