首页 > Web开发 > 详细

CSS-常用hack

时间:2014-04-18 21:50:44      阅读:562      评论:0      收藏:0      [点我收藏+]

尽量少用或者不用hack

方法一:IE条件注释法:

01.只在IE下生效

bubuko.com,布布扣
<!-- [if IE]>
<link type="text/css" href="text.css" rel="stylesheet" />
<![endif] -->
bubuko.com,布布扣

02.只在IE6下生效

bubuko.com,布布扣
<!-- [if IE 6]>
<link type="text/css" href="text.css" rel="stylesheet" />
<![endif] -->
bubuko.com,布布扣

03.如果想针对某个范围以内版本的IE进行hack,可以结合lte/lt/gte/gt/!关键字进行注释;

lte:小于等于;
lt:小于;
gte:大于等于;
gt:大于;
!:不等于; 

例如:表示IE版本大于6

bubuko.com,布布扣
<!-- [if gt IE 6]>
<link type="text/css" href="text.css" rel="stylesheet" />
<![endif] -->
bubuko.com,布布扣

方法二:选择器前缀写法:

在css选择器前加一些只有特定浏览器才能识别的前缀。

"*html"前缀只对IE6生效,"*+html"只对IE7生效;

bubuko.com,布布扣
<style type="text/css">
*html .test{width: 120px;}  /*只在IE6下生效*/
*+html .test{width: 120px;}  /*只在IE7下生效*/
</style>
bubuko.com,布布扣

方法三:样式属性前缀写法:

在样式的属性名前加一些只有特定浏览器才能识别的前缀。

"_"前缀只对IE6生效,"*"对IE6/IE7生效;

bubuko.com,布布扣
<style type="text/css">
.test{
    _width: 120px;  /*只在IE6下生效*/
    *width: 120px;  /*对IE6/IE7生效*/
}
</style>
bubuko.com,布布扣

针对safari浏览器;

bubuko.com,布布扣
elelent{
    [;color: red;  /*只在safari下生效*/
}
bubuko.com,布布扣

 

CSS-常用hack,布布扣,bubuko.com

CSS-常用hack

原文:http://www.cnblogs.com/baixc/p/3670644.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!