css hack的使用

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识别）

①

②

③

④

⑤

用脚本设置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之外的浏览器也支持。

窗口滚动条显示问题

在使用弹出窗口或者框窗口架的时候，有时会有多余的滚动条出现，这时需要从多个方面进行确认：

1. 弹出窗口时window.open方法参数中设置的窗样式是否定义了scroll=yes
2. 框架标签的属性中是否设置了scrolling=“yes”
3. 窗口或框架内页面的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将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

l        block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。