css兼容性写法的实例讲解

• *和_ ， ie6可以识别；

• *      ， ie6,ie7可以识别；

• !important  ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；

• -webkit- ，针对safari，chrome浏览器的内核CSS写法

  立即学习“前端免费学习笔记（深入）”；

• -moz-，针对firefox浏览器的内核CSS写法

• -ms-，针对ie内核的CSS写法

• -o-，针对Opera内核的CSS写法

    如果只让ie6看见用        *html .head{color:#000;}
　　如果只让ie7看见用        *+html .head{color:#000;}
　　如果只让ff看见用:         root body .head{color:#000;}
　　如果只让ff、IE8看见用     html>/**/body .head{color:#000;}
　　如果只是不让ie6看见用     html>body .head{color:#000;} 即对IE 6无效
　　如果只是不让ff、IE8看见用 *body .head{color:#000;}    即对ff、IE8无效

1. <span class="pun">.<span class="pln">div1<span class="pun">{</span></span></span>

2. <span class="pun">*<span class="pln">position<span class="pun">:<span class="pln">relative<span class="pun">;</span></span></span></span></span>

3. <span class="pun">-<span class="pln">moz<span class="pun">-<span class="pln">background<span class="pun">-<span class="pln">size<span class="pun">:<span class="lit">50<span class="pun">%;</span></span></span></span></span></span></span></span></span>

4. <span class="pun">-<span class="pln">ms<span class="pun">-<span class="pln">content<span class="pun">-<span class="pln">zoom<span class="pun">-<span class="pln">limit<span class="pun">-<span class="pln">max<span class="pun">:<span class="lit">50<span class="pun">%;</span></span></span></span></span></span></span></span></span></span></span></span></span>

5. <span class="pun">-<span class="pln">o<span class="pun">-<span class="pln">box<span class="pun">-<span class="pln">shadow<span class="pun">:<span class="lit">5px<span class="lit">10px<span class="lit">20px<span class="com">#f0f;</span></span></span></span></span></span></span></span></span></span></span>

6. }

7. <span class="pun">.<span class="pln">div2<span class="pun">{</span></span></span>

8. <span class="pln">position<span class="pun">:<span class="pln">absoulte<span class="pun">!<span class="pln">important<span class="pun">;</span></span></span></span></span></span>

9. }

 <br/>

一个高30px的div，默认显示左上角，如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则修改line-height

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

数值越大越下，为了防止撑破，还需要再给一个样式overflow:hidden; 

块级对象设置三个样式解决浏览器默认值：宽高overfl

LI中内容超过长度后以省略号显示的技巧 

此技巧适用与IE与OP浏览器

width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
} 

为什么web标准中IE无法设置滚动条颜色了 
解决办法是将body换成html 

html { 
scrollbar-face-color:#f6f6f6; 
scrollbar-highlight-color:#fff; 
scrollbar-shadow-color:#eeeeee; 
scrollbar-3dlight-color:#eeeeee; 
scrollbar-arrow-color:#000; 
scrollbar-track-color:#fff; 
scrollbar-darkshadow-color:#fff; 
} 

为什么无法定义1px左右高度的容器 
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden 　 zoom:0.08 　 line-height:1px

1. body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}  

2. img{border:0px;}  

3. ul {margin:0px;padding:0px;}/  

4. ul li {list-style:none;} 

/* Clear Fix */ 
.clearfix:after { 
content:”.”; 
display:block; 
height:0; 
clear:both; 
visibility:hidden; 
} 
.clearfix { 
display:inline-block; 
} 
/* Hide from IE Mac */ 
.clearfix {display:block;} 
/* End hide from IE Mac */ 
/* end of clearfix */ 

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示} 

太多了 参考：