最近一直在做Graphic 和 html converting。 以后的网页设计全面转换到w3c CSS+DIV标准。碰到很多各种问题,千奇百怪,跨浏览器,都需要用到CSS HACK来做。
衷心的希望IE8能和mozilla标准浏览器使用同一标准。IE和FF之间的不良竞争,花费了我们这些做HTML coding的人太多的多于时间来调整页面,hack css,很无聊的事情。
以下是关于怎么hack css以及hack css如何工作。
火狐专用的:
Firefox 2.0 or older
If you need to make pre-Acid2 Firefox behave, you can safely use this:
#hackme, x:-moz-any-link {styles for Firefox 2.0 here}
#hackme, x:-moz-any-link, x:default {restore styles for Firefox 3.0 and newer}This hack will apply rules to #hackme element. You can change the first selector (#hackme) in each rule to anything else, but don’t touch the ones with x.
ExampleFor 9 versions support for inline-block in Gecko was FUBAR. The closest equivalent wouldn’t respect line-height. The workaround:
#menu a {display:inline-block; line-height:2em;}
#menu a, x:-moz-any-link {display:-moz-inline-box; padding-top:0.5em;}
#menu a, x:-moz-any-link, x:default {display:inline-block; padding-top:0;}Firefox 1.0 or older
#hackme, x:-moz-any-link {styles for Firefox 1.0 here}
#hackme, x:-moz-any-link, x:only-child {restore normal styles for newer versions}Same as above — you can change #hackme to whatever you need, but leave other selectors in the same group as they are.
How do these work?CSS error handling rules require browsers to drop entire rule if any of the selectors is not recognized. :-moz-any-link is a selector private to Gecko, so all non-Gecko browsers see it as parse error. :default has been added in Firefox 3.0 (Gecko 1.9),
nly-child has been added in Firefox 1.5, so they’re unknown to earlier versions of Firefox/Gecko.
IE 6, IE7 和Opera专用:
区别IE6与FF:
background:orange;*background:blue;区别IE6与IE7:
background:green !important;background:blue;区别IE7与FF:
background:orange; *background:green;区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;另外再补充一个,下划线”_”,
IE6支持下划线,IE7和firefox均不支持下划线。于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
啊MAC下的Safari是mozilla标准浏览器,所以FF看着OK的Safari基本也会OK,只是某些特殊情况下,比如一些CSS+JS的搭配会导致Safari Crash。至于为啥没有仔细去研究。
基本上Hack CSS的原理就是说不通浏览器有不通识别的注释方式,所以在出现效果不一样的时候,重复写,互相覆盖,就能达到兼容多种浏览器的效果,页面完成后,把各个浏览器分别的CSS用独立文件导入,方便查看和修改。
最后推荐一个不错的DIV+CSS中文网站,堆积了不少文章和资源,值得一看。
下周回国,希望一切都好。