CSS hack实录

发布时间:2020-05-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了CSS hack实录脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《CSS hack实录》要点:
本文介绍了CSS hack实录,希望对您有用。如果有疑问,可以联系我们。

关于IE的CSS HACK,做后端没想到前端也这么累。总的感觉是IE6-8实在无语。原先有用过,但很久没碰CSS,都忘了差不多。

文中所用的hack可以参考这2张表:http://www.jb51.cc/jiaocheng/40.html


以下是工作中一些有用的HACK记录:


在input中,IE8对数字和文字高度不同影响外围input的定位:

针对IE8有效。关于input中数字和文字高度不同,在IE6-7下无此现象。

解决办法:

添加:

vertical-align :middle\0;   \0只对IE8有效。查了一下,网上有提到IE8的以下几个BUG(本例应是下面的line-height的BUG):

  IE8中 border的 transparent 不被支持
  原有z-index BUG依旧存在
  IE8中产生新的BUG:line-heigth BUG
  IE8中 display:table依旧不支持
  IE的List-item whitespace bug在IE8中依旧存在 

另:

color:#0000FF\9;       /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */
*height : ..  IE7、IE6

_height : ..  IE6

因此可以这样区分:

color:#0000FF\9;  /*ie6,ie7,ie8,因此也可以用于区分IE和其它浏览器*/

*color:#FFFF00; 以及 +color:#FFFF00;   /*ie6和IE 7 均可识别*/

_color:#FF0000;   /*只有ie6*/

color:#0000FF\0;  /*ie8*/

从下表可知只能用 \0和\9。其它的数字不管哪个浏览器都不能识别。

对于IE6和IE7,可以这样:   +width:348px;  _width:324px;  这样IE7和6会先识别348px随后IE6调为324px


!important属性:

浏览器识别:ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE 6.0仍然不能识别,! important,最主要是为了IE 6.0浏览器。


关于FirefoxCSS HACK

@-moz-document url-prefix(){这里是放css语句的},这个HACK只有firefox识别,比如exPad下面的浮动定位在FIREFOX出现偏差时,就可以如下调整:

#exPad{position:absolute; top:0px; z-index:9999;right:0; display:none;}

/*firefox HACK*/

@-moz-document url-prefix(){#exPad{top:67px;right:153px;}}


关于ChromeCSS HACK

以前用过的css hack 都是针对ie,ff,opera,这个chrome和ff该怎么区分呢?试了几个ie,ff的hack方法,都不行,上网搜索,看到很多人说可以用

@media screen and (-webkit-min-device-pixel-ratio:0) {

     body { background-color: blue; }

}

来进行chrome 和ff的css hack,经测试上面的写法,在chrome是有效的,其中关键的是“and (-webkit-min-device-pixel-ratio:0)”,如果把它去掉,则FF\IE\CHROME都有效,无法做到区分的目的。

但不知道为什么,如果同时写义了几个标签,只会部分有效,

 

还有一种办法,如下,其中的a是标签,可以多个用逗号隔开:

body:nth-of-type(1) a {

  color:red;

}

body:nth-of-type(1)这句是选择第一个body元素。 经测试, body:nth-of-type(1) chromeoperafirefox都支持这种写法。hack主要还是前面的一段 @media screen and (-webkit-min-device-pixel-ratio:0)

可以针对其它标签,比如:

body:nth-of-type(1) #quick-toolbox-list,ul.quick-toolbox-list-content {

  background-color : red;

}

把#quick-toolbox-list和 ul.quick-toolbox-list-content在chrome的背景都改成红色

也有人说body:nth-of-type(1)在FF也无效,可能是测试版本不同,在firefox 14.0.1下,对body:nth-of-type(1)也有效。不能达到单独区分出chrome的目的。

总结:

还是用:

@media screen and (-webkit-min-device-pixel-ratio:0) {

     body { background-color: blue; }

}

总结

以上是脚本之家为你收集整理的CSS hack实录全部内容,希望文章能够帮你解决CSS hack实录所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478