部分CSS (Hack)
1.条件注释控制符
! [if ! IE] "非"运算符
lt [if lt IE 6] 小于
lte [if lte IE 6] 小于等于
gt [if gt IE 6] 大于
gte [if gte IE 6] 大于等于
( ) [if (lte IE 6)] 用于子表达式,配合布尔运算符
& [if(lte IE 9)&(gt IE 6)] AND运算符
| [if (gt IE6)|(!IE)] OR运算符
如:<!--[if IE 6]>仅IE6可以识别<![endif]-->
* 只能被IE浏览器识别
IE 7 不但能识别 * 符号,还能识别 !important
div{
color : green; //Firefox 中显示绿色
color : red !important; //IE7中显示红色
*color : blue; //IE6中显示蓝色
}
IE能识别 *html 与 *+html,非IE浏览器不能识别
div{ color : red; } 非IE显示红色
*html div{ color : green; } IE6 显示绿色
*+html div{ color : blue; } IE7 显示蓝色
更多区分浏览器区分方法
#ie6{ _display:block; } IE6
#ie7{ *+display:block; } IE7
#ie8{ display:block\0; } IE8
:root #ie9{ display:block\0; } IE9 10
2.常用的属性前缀
-webkit webkit核型浏览器 Chrome Safari 等
-moz 火狐
-ms IE
-o Opera
如:旋转效果
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
-ms-transform:rotate(-3deg); /* Internet Explorer */
-moz-transform:rotate(-3deg); /* Firefox */
-webkit-transform:rotate(-3deg); /* Safari 和 Chrome */
-o-transform:rotate(-3deg); /* Opera */
transform:rotate(-3deg); /* W3C无属性前缀,放于最后会覆盖前面带属性的前缀的定义 */
}
3.IE6中浮动元素的双倍边距问题
IE6中首个浮动到父元素边上的元素,如果有该方向的margin值,会以双倍显示。
解决办法:为浮动元素添加属性 display:inline;
4.
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。