浏览器hack

浏览器hack

首先我们来了解下什么是浏览器hack，浏览器hack也有人叫做CSS hack。在Internet Explorer 6,Internet Explorer 7,360.，Mozilla Firefox等不同的浏览器下，对CSS解析的优先级不一样，也就是不同的浏览器对css的认识不一样，因此会导致生成的页面效果不一样，得不到我们所 需要的页面效果，或者效果有很大的差异。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
　　我们 知道了什么是hack，还得知道css hack的原理是什么，这样也有利于后面css hack编写过程。其实就是上面所提到的，由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系，来书写css hack，这对于认识不同浏览器的解析特性和解析优先级的了解，来写css hack代码就至关重要了。
　　下面我们就将浏览器支持的不同符号总结：
　　注：Ie6支持下划线，例如：_select. 
　　有了上面浏览器支持的符号，离写出满意的css hack距离还很遥远，下面我在总结下，在处理css hack方面的一些技巧积累。
　　1. div的垂直居中问题
　　{marding：0 auto；padding：0 auto}
　　2. div浮动ie文本产生3像素的bug
　　左边对象浮动，右边采用外 的左边距来定位，右边对象内的文本会离左边有3px的间距。
　　第一种方法是不让重复的内容放入一个div中。
　　第二种是，如何重复的最后一行是li就加上

• hidden

　　如果是div就换成

hidden

　　4． ie6。ie7下背景重复问题
　　在相应的属性中加入：font-size：0px就可以。
　　5． Form标签
　　这个标签在ie中，会自动marging一些边距，而在ff中marging则是0，因此，如果想显示一直，可以{padding：0px；marging：0px}
　　技巧的总结是经验的积累，也是一个漫长的过程，下面我对hack的管理分享：
　　1． 如果没有必要，不要使用
　　使用了hack后会带来后期很大的维护成本，个人觉得要是小于10px的差距，就没有必要去使用hack技术。
　　2． 充分了解css和css hack技术
　　要想写出比较完美的代码，必须充分了解css技术。
　　3． 经常注释
　　在XHTML中注释是个很好的习惯，不然代码乱成一团，到了后来就奔上不知道代码的逻辑性，没有重用性，阅读性和可维护性，二次开发性。

 

 

IE Hack

IE系列浏览器的hack大略如下：

• _nowamagic:1px;-----------ie6
• *nowamagic:1px;-----------ie7
• nowamagic:1px\0;----------ie89
• nowamagic:1px\9\0;--------ie9
• :root nowamagic:1px;    ----ie9(实际情况可能ie9还是有问题，再用这种方式)

这样就基本上就可以兼容所有IE。

其中粉红色部分为属性hack，黄色部分为选择器hack，它们可以结合使用。此外Firefox和Chrome也有它们专有的hack，详细hack方式及使用示例如下：

Firefox 与 Chrome 的 Hack

Firefox：

1	@-moz-document url-prefix()    /*写在选择器外层时（只可写在此处）：Firefox only*/

Chrome：

1	@media screen and (-webkit-min-device-pixel-ratio:0)    /*写在选择器外层时（只可写在此处）：Chrome only*/

使用示例：

1	@-moz-document url-prefix()    /*Firefox*/

2

{

3

body

4

{

5	background-color:pink;

6

}

7

}

浏览器对css的解析是从前到后的，并且采用最后一个样式声明。