Home  >  Article  >  Web Front-end  >  不同浏览器下的CSS HACK_html/css_WEB-ITnose

不同浏览器下的CSS HACK_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:28:451038browse

  今天接了个新项目,年底要做完。预祝我顺利完成工作吧。在搭CSS框架的过程中,遇到了一些浏览器兼容性问题。于是就统计一下各个浏览器专用的css hack吧。

  (粘贴自百科百科)

  1. 针对火狐浏览器的CSS Hack:

    @-moz-document url-prefix() {    .selector {        attribute: value;    }}

  2. 针对webkit内核及Opera浏览器的CSS Hack:

    @media all and (min-width:0){    .selector {        attribute: value;/*for webkit and opera*/    }}

  3. 从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来,但并不能区分它们俩,因此我们还需要在上面样式的基础上再加一个样式:

    @media screen and (-webkit-min-device-pixel-ratio:0) {    .selector {        attribute: valueForWebKit;/*only for webkit*/    }}

     

  4. 由于这个样式是针对webkit的,会把前面的样式覆盖掉,因此,通过这两个样式就能区分出webkit和opera了,opera的属性值取value,webkit的属性值取valueForWebKit。

     

  5. 其实按常规来说,我们一般是处理ie上的兼容问题,但遇到需要处理火狐或Chrome的兼容问题时,一定要先查看网页结构是否合理以及便签使用是否规范,直到迫不得已时再使用上面的CSS Hack。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn