跨浏览器兼容经验总结:CSS样式表篇

csshack的使用
　　
　　CSS类级别的hack
　　
　　仅IE7识别*+html{…}
　　
　　IE6及IE6以下识别*html{…}
　　
　　opera、safari、chrome识别：
　　
　　@mediaalland(min-width:0px){…}//Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则
　　
　　@mediascreenand(-webkit-min-device-pixel-ratio:0){…}//IE、Firefox不识别该规则
　　
　　仅opera识别：
　　
　　@mediascreenand(-webkit-min-device-pixel-ratio:10000)，notalland(-webkit-min-device-pixel-ratio:0{…}
　　
　　CSS属性级别的hack
　　
　　仅IE识别：margin-left:10px\9;
　　
　　仅IE8识别：margin-left:10px\0;
　　
　　仅IE7识别：*margin-left:10px;
　　
　　仅IE6识别:_margin-left:10px;
　　
　　CSSHack综合示例：
　　
　　/**add'margin-top:-10px;'forIE7/Firefox/Opera/Safari/Chrome,'margin-top:5px;'forIE8**/
　　
　　.news_list01h2span{float:right;margin-top:5px;*margin-top:-10px;display:inline}
　　
　　@mediaalland(min-width:0px){
　　
　　.news_list01h2span{float:right;height:19px;margin:0000;padding-top:16px;padding-bottom:0;display:inline}
　　
　　}
　　
　　HTML代码片断级别的hack（仅IE识别）
　　
　　①
　　
　　②
　　
　　③
　　
　　④
　　
　　⑤
　　
　　用脚本设置CSS属性
　　
　　设置元素的style样式
　　
　　VarspanElement=document.getElementById(“mySpan”);
　　
　　//下面写法保证出IE外，所有浏览器可用
　　
　　spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
　　
　　//下面的写法保证IE可用
　　
　　spanElement.style.cssText=”font-weight:bold;color:red;”;
　　
　　设置元素的class属性
　　
　　Varelement=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进行了样式定义，如果没有请参考如下代码。
　　
　　html{
　　
　　margin:0;
　　
　　padding:0;
　　
　　overflow-x:hidden;
　　
　　overflow-y:hidden;
　　
　　}
　　
　　line-height属性
　　
　　line-height行高指的是文本行的基线间的距离，即字体最底端与字体内部顶端之间的距离。如下图所示：
　　
　　文本之间的空白距离（行距）不仅仅是行高决定的，同时也受字号的影响。有时侯同一行内的不同元素底边没有对齐，有可能就是行高不统一造成的，这时关调整高度和对齐方式是不够的，还需要调整line-height属性。
　　
　　display:inline-block
　　
　　display属性有三个值：block，inline，inline-block。其中display:block就是将元素显示为块级元素；display:inline就是将元素显示为行内元素；display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
　　
　　lblock元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子，display属性默认值为block。
　　
　　linline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子，display属性默认值为inline。
　　
　　linline-block的元素特点：呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性，目前IE8、Firefox3、Opera、Safari都可以支持该属性了。
　　
　　div中的文字自动换行问题
　　
　　目前控制换行是使用以下CSS：
　　
　　div．content{
　　
　　word-wrap:break-word;
　　
　　overflow:hidden;
　　
　　}
　　
　　在IE、Firefox、Safari、Chrome下没有任何问题，但是在Opera下，长串英文会被遮住超出的内容。如果想要让长串英文字符也自动换行，还需要设置word-break:break-all;（但是，此方式会导致普通的英文语句中的单词会被断开，ie下也是）。英文单词在排版规则上不应该被断开，长串英文字符其实就是一个比较长的单词，自然也不需要断开换行显示了，所以一般不需要额外设置word-break:break-all;。
　　
　　textarea中的文字自动换行问题
　　
　　在textarea中设置输入内容的自动换行，也是在CSS中设置word-wrap:break-word;属性。需要额外注意的是textarea元素本身有一个warp属性，其取值含义如下：
　　
　　loff：不自动换行；
　　
　　lhard：自动硬回车换行，换行标记一同被传送到服务器端（Opera、Chrome下不传）；
　　
　　lsoft：自动软回车换行，换行标记不会传送到服务器端。

分享到：