码迷,mamicode.com
首页 > Web开发 > 详细

秒杀一切的CSS hack

时间:2014-06-26 13:23:49      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:css3   css   ie   

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

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

     示意图如下:

 bubuko.com,布布扣

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

    <!--[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


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

bubuko.com,布布扣

<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>
添加
x-webkit-speech  属性就可以了!




秒杀一切的CSS hack,布布扣,bubuko.com

秒杀一切的CSS hack

标签:css3   css   ie   

原文地址:http://blog.csdn.net/confidence68/article/details/34433661

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!