常见的浏览器内核引擎以及具体应用:
*和_ , 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无效
<span class="pun">.<span class="pln">div1<span class="pun">{</span></span></span>
<span class="pun">*<span class="pln">position<span class="pun">:<span class="pln">relative<span class="pun">;</span></span></span></span></span>
<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>
<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>
<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>
}
<span class="pun">.<span class="pln">div2<span class="pun">{</span></span></span>
<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>
}
<br/>
一个高30px的div,默认显示左上角,如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则修改line-height
数值越大越下,为了防止撑破,还需要再给一个样式overflow:hidden;
块级对象设置三个样式解决浏览器默认值:宽高overfl
LI中内容超过长度后以省略号显示的技巧
此技巧适用与IE与OP浏览器
li {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
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
img{border:0px;}
ul {margin:0px;padding:0px;}/
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; //将对象作为块元素级的表格显示}
太多了 参考:
以上是css兼容性写法的实例讲解的详细内容。更多信息请关注PHP中文网其他相关文章!