探究针对GoogleChrome的CSS hack写法

本节和大家一起学习一下针对GoogleChrome谷歌浏览器的CSS hack的使用,CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法;也有人说CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。

CSS hack简介

CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。

CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此,在设计之初,写CSS hack需要遵循以下三条原则。

针对GoogleChrome谷歌浏览器的CSS hack

Google于9月3号推出了浏览器GoogleChrome,写前端效果的同志们又有得辛苦了,IE/FF/Opera/Safari/GoogleChrome本来不太平的世界更混乱了。

所幸GoogleChrome用的是与Safari一样的Webkit引擎,我们可以使用对safari相似的方式作CSS hack,写法为:

ExampleSourceCode


  1. @mediascreenand(-webkit-min-device-pixel-ratio:0){  
  2. /*针对GoogleChrome、Safari3.0、Opera9的CSS样式*/  
  3. }  

 另有一种通过附加#的CSS hack对chrome无效,可能是Webkit版本不同。此CSS hack无效

ExampleSourceCode


  1. p.callout{color:#FF0000;font-weight:normal;}  
  2.  
  3. p.callout{color:#000000;font-weight:bold;#}  
  4.  

附:各种常见浏览器使用的内核(RenderingEngine)

ExampleSourceCode


  1. MozillaFirefox(Gecko)  
  2. InternetExplorer(Trident)  
  3. Opera(Presto)  
  4. Konqueror(KHTML)  
  5. Safari(WebKit)  
  6. GoogleChrome(WebKit)  
  7.  

【编辑推荐】

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索css
, 浏览器
, 兼容性
, safari
, css 兼容
, hack
, Css兼容
, hack,浏览器
, Hack示范
, 不同
, 兼容性写法
兼容写法
css hack写法、chrome css hack、ie8 hack的写法、ie hack写法、hack写法,以便于您获取更多的相关知识。

时间: 2024-11-08 18:09:07

探究针对GoogleChrome的CSS hack写法的相关文章

实例解析一款针对IE6的CSS hack用法

本文通过实例向大家描述一下IE6的CSS hack用法,我们以一个LOGO为实例,讲解了针对IE6,应用CSS HACK设置有别于IE7和FF的效果.具体内容请看本文详细介绍,相信本文介绍一定会让你有所收获. 一款针对IE6的CSS hack用法实例 CSS网页布局的兼容性问题一直困扰着大家,其实在51cto.com以前的文章中也有着丰富的CSS HACK与CSS兼容性的文章,只是有些文章可能讲的比较抽象而没有实例化,不便于大家的理解. 现在要讲解的是一个关于IE6的CSS HACK的用法.我们

一个针对IE7的CSS Hack

css IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效.虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的.Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是: >bodyhtml**+html 这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏

2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的.加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,怎么办呢? 第一种方法: 还好,微软提供了这样一个代码: <meta http-equiv="x-ua-compatible" content="ie=7" /> 把这段代码放到里面,在ie8里面的页面解析起来就跟ie7一模一样的了,所以,基本

不同浏览器中CSS Hack写法

区别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)不

CSS hack写法区分不同浏览器IE6 IE7 firefox:

区别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

转 CSS hack:针对IE6,IE7,firefox显示不同效果

CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF:         background:orange;*background:blue; 区别IE6与IE7:         background:green !important;background:blue; 区别IE7与FF:         background:orange; *back

常用的css hack简单写法与兼容性介绍

区别不同浏览器的CSS hack写法: 区别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:gree

CSS hack在IE6,IE7,firefox用法与区分(1/2)

  一.CSS HACK  以下两种方法几乎能解决现今所有HACK.  1, !important  随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)  <style>  #wrapper  {  width: 100px!important; /* IE7+FF */  width: 80px; /* IE6 */  }  </style>    2, IE6/IE77对FireFox  *+h

一个针对IE7的CSS Hack_经验交流

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效.虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的.Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是: >bodyhtml**+html 这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被