CSS HACK : 浏览器兼容的一些相关提示

[ 作者:笑傲江湖 发布于:2012年-7月-8日 15:27 星期日  分类:百 宝 箱 ]

  以前就唠叨过,不过是浅尝辄止,没有系统的研究过,因为太杂了,受不了,基本上是碰到什么问题就临时解决什么问题,也没有过多的总结。上两周因为在给某局折腾网站,再次被IE系列浏览器折磨的死去活来的,基本算是告一段落,于是就想总结一下,以后可以少走点弯路。放狗搜了一下,其实不只咱天朝有这样的需求,老外也一样,人家也总结了不少经验,咱就借花献佛吧。
  先说IE6这个老顽固吧,就它的事情最多,IE7、8、9相对来说好很多。对于IE6来说,Box Model盒子模型里定义的参数IE6解释的都一塌糊涂,比如:
div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}
  这个样式定义的box的宽度,对于IE6来说,就是100px,但是对于其他比较流行的浏览器,宽度是124px,这问题就很明显了,有了这个差异,网页的布局会有问题,所以这个的注意。
  然后是Double Margin双倍边距的问题,比如:
div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
   float: right;
   margin-right: 20px;
}
  这个box元素咱们需要它Float到右边,且右边距是20px,实际上IE6会把边距加倍,成了40px,这又是个把你的布局彻底打乱的一个Bug,解决之道当然是有的,就是再加一个定义,"display:inline;"。问题是可以解决,但是有时你可能并不想要这个元素是inline的啊,所以实际使用中你得自己解决实际需求。
  IE6不支持Min-Width和Min-Height,Min-Width可能用的较少,Min-Height相对来说可能多点。不支持那就只能找HACK写法了,有外国友人给出一个兼容的写法,如下:
selector {
  min-height:500px;/* 这一句IE6不认识 */
  height:auto !important;/* 这一句里的!important,IE6不认识 */
  height:500px;/* 这一句IE6是认识的 */
}
  !important这个申明IE6是不认识的,但是它之前的定义是支持的,所以这样式定义的高度是500px,如果样式内的元素高度大于500px之后,就开始auto自适应了。IE7及其他浏览器是支持!important这个申明的,最后那一行定义也就不起作用了。
  顺道再说一下这个!important,它是用来提升样式定义优先级别的,当然,IE6不认识这个申明,IE7及以上或者其他流行的浏览器都认得,看下面CSS和HTML:
#box div{
     color:red;
 }
.important_off{
     color:blue;
}
.important_on{
     color:blue !important;
}
这一行没有用important
这一行用了important
  默认情况下,id的优先级是高于class的,所以,页面里第一行文字不会是蓝色的,而是继承id的颜色属性,是红色的。但是第二行,因为class里使用了!important来提升了样式的优先级,或者说是强制重定义了样式,这个申明是高于id里定义的样式的,因此第二行的文字是蓝色的。刚才说IE6不认得!important,这里它又认得,你说这是什么事啊,盖茨大叔,给个解释呗。
  继续,IE6下,只有a这个链接元素支持hover这个伪类属性,其他浏览器都可以很好的支持其他元素的这个伪类属性,如果你想让IE6也支持,那就只能用jQuery之类的脚本了。
  最蛋疼的一点,IE6这丫的不支持透明的PNG格式图片,如果要求不是很高,那就用GIF代替吧,不过毕竟GIF只有256色,PNG透明图片是24位真彩色的。当然,也可以用iepngfix.htc这种Behavior来解决,会稍微影响页面加载速度。具体做法请自行搜索一下吧。
  上面罗嗦了一堆,其实各个都是蛋疼的问题。所以在写样式表的时候,需要你适当的收拾一下。下面就是收集的一些关于CSS的hack写法。
1、条件语法判断
<!--[if condition]> HTML <![endif]-->
condition条件写法:
IE 任何版本的IE
lt IE version 低于某版本的IE
lte IE version 低于等于某版本的IE
IE version 仅适用某个版本的IE
gte IE version 高于等于某个版本的IE
gt IE version 高于某个版本的IE
这里的version是具体的IE版本号,比如5,5.5,6,7,8,9。比如:
<!--[if lte IE 6]>
<style type="text/css">
.ie6fix {height:8px; font-size:0px; margin:0px; padding:0px;}
</style>
<![endif]-->
  这一段要放在head和/head标签之间,如果不是符合条件的浏览器,这一段条件语法判断是无效的,因为代码前是注释开始的。这样可以用来给特定版本的浏览器定义特殊的样式,且这一段要放在你的主样式表之后,因为样式表是按顺序加载的。就是你的head和/head标签之间还有这个<link rel="stylesheet" type="text/css" href="/admin/main.css">样式表引用语句,这个放在前面,上面的条件语法判断放在它下面。
2、样式表文件里直接hack
.class {
 color : red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
 _color : orange; /* IE6 and below */ 
 _bac\kground: #f60; /* IE 6 only */

 _background/**/: #0f0; /* IE 5.0 */
 _background:/**/ #f62; /* IE 5.5 only */
 _background/**/:/**/ #f61; /* IE 6 only */
}

/* 符合标准的CSS 推荐使用 */
* html .class {color: #F00;} /* IE 6 only */

*:first-child+html .color {color: #F00;} /* IE 7 only */
*+html .color {color: #F00;} /* IE 7 only (上一行的简写) */

/* 不符合标准的CSS 用于不用随你 */
@media \0screen {
  .color {color: #F00;} /* IE 8 only */
}
:root .color {color: #F00\9;} /* IE 9 only */
  样式表里直接hack的话,注意定义样式的顺序就OK,至于是否符合CSS标准,看你的想法了,反正不管白猫黑猫,能抓住耗子的就是好猫。这里只是总结了常见的关于浏览器兼容的问题,其他肯定还有不少,只能是碰到了再说了。另外,很多HTML的元素,比如form,li,input等等,默认都有各自的padding和margin,各个浏览器的默认值都不同,这也是个问题,所以需要你自己注意了。

2012年7月14日补充:
  关于Javascript脚本,IE6还真是奇葩中的另类战斗机啊,看下面代码:
<script type="text/javascript">
	var tabber1 = new Yetii({
		id: 'tab-container-1',
		active: 1,
		interval: 5,	
		wait: 10,	//最后的逗号,IE7+是没问题的,IE6必须去掉,否则提示脚本错误。
	});
</script>

微信支付宝

标签: CSS HTML 样式表 hack

评论2 引用0 浏览9191

信息列表:

楼主

xiaozhu
2012-07-14 18:58
你得博客做的很不错,样子很漂亮。
笑傲江湖
2012-07-14 20:28
@xiaozhu:多谢夸奖,多谢支持。
说点什么:

正文内容:

 




图片博文