秒杀一切的CSS hack

来源：互联网发布：360彩票11选5遗漏数据编辑：程序博客网时间：2024/05/21 08:01

之前在百度博客上写过一篇关于CSS hack的汇总，对CSS各种hack做了汇总，最近浏览器很多时候都不考虑IE6了，IE6在很长一段时间里，他的兼容性让很多搞前端的人员头痛！

看了很多人写过针对IE6的hack是“_”下划线，其实不然，我在2年前做CSS布局的时候就发现，其实IE7也是识别下划线的，有时候IE6调整好了，但是IE7中又出现问题了。其实针对IE7的hack是“*+”;例如：*+color:red;

示意图如下：

现在很多时候也可以用如下写法：

    <!--[if IE 6]><link href="intro_css/ie/ie6.css" rel="stylesheet" type="text/css" />    <![endif]--><!--[if IE 9]><link href="intro_css/ie/ie9.css" rel="stylesheet" type="text/css" /><![endif]--><!--[if IE 8]><link href="intro_css/ie/ie8.css" rel="stylesheet" type="text/css" /><![endif]--><!--[if IE 7]><link href="intro_css/ie/ie7.css" rel="stylesheet" type="text/css" /><![endif]--><!--[if IE]><link href="intro_css/ie/ie.css" rel="stylesheet" type="text/css" /><![endif]--><!--[if lt IE 9]><script src="intro_js/html5_shrrr.js"></script> <![endif]-->

谷歌其实也有很多特有的写法，其他浏览器不识别！

例如：

@media screen and (-webkit-min-device-pixel-ratio:0){.red {color: #ff0000;}}

只有谷歌浏览器识别！

另外，谷歌很多特殊的用法，IE中不会出现，例如，针对谷歌的滚动轴修改！

::-webkit-scrollbar{    padding-left:1px;    background-color:#fafafa;    overflow:visible;    width:9px;}::-webkit-scrollbar-thumb{    background-color:rgba(0, 0, 0, .1);    background-clip:padding-box;    border-left-width:2px;    min-height:10px;    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);}::-webkit-scrollbar-thumb:vertical:hover{    background-color:rgba(0, 0, 0, .2);}::-webkit-scrollbar-thumb:vertical:active{    background-color:rgba(0, 0, 0, .2);}::-webkit-scrollbar-button{    height:0;    width:0;}::-webkit-scrollbar-track{    background-clip:padding-box;    border:solid transparent;    border-width:0 0 0 2px;}::-webkit-scrollbar-corner{    background:transparent;}::-webkit-scrollbar-track-piece{margin: 10px 0;-webkit-border-radius: 0;-webkit-border-bottom-right-radius: 4px;-webkit-border-bottom-left-radius: 4px;}

参见：http://blog.csdn.net/confidence68/article/details/33735145

还有谷歌浏览器的声音录入等等如下图：

<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>

添加

x-webkit-speech  属性就可以了！

2 0