下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

简介CSS hack之特殊符号

作者:课课家教育     来源: http://www.kokojia.com点击数:949发布时间: 2016-10-10 10:00:05

标签: CSS hack特殊符号浏览器兼容

Web开发

      在css中有一个专业名词叫做CSS hack,它指的是由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。CSS hack的写法有很多种,其中,特殊符号的应用最为普遍,也最为简洁,下面小编就为大家介绍特殊符号类型的CSS hack技术。

简介CSS hack之特殊符号_CSS hack_特殊符号_浏览器兼容_课课家

  1、反斜线(\) 

  这个特殊符号主要用于解决CSS注释在IE/Mac上的兼容。因为以斜杠一个星号开始,以星号斜杠结束的CSS注释在在IE/Mac上是不正确关闭的。如果我们想在IE/Mac上作注释,就可以把反斜线放在具体注释的内容后面,结束星号的前面。

  如:

  /* CSS注释:在IE Mac上忽略下面的语句 \*/ 

  selector { ...styles... } 

  /* 忽略结束 */ 

  2、下划线(_) 

  由于在IE6及其以下版本,属性前要增加下划线前缀才能被识别,所以在一个属性前面加上下划线或者连字符,就成为了IE6及以下版本浏览器的专有属性,当然其他浏览器不存在这个问题。

  如:

  #elem {  

  width: [W3C Model Width]; 

  _width: [BorderBox Model]; 

   } 

  3、星号(*) 

  IE7除了能识别添加下划线作为前缀的属性之外,还可以识别以非字母字符为前缀的属性,此时我们可以使用星号作为前缀。

  如:

  #elem { 

  width: [W3C Model Width]; 

  *width: [BorderBox Model];  

  } 

  提示:由于在属性前添加下划线或星号作为前缀只能在IE浏览器识别,其他浏览器不能识别,因而不推荐使用。

  4、星号html(*html) 

  大家知道W3C标准DOM的根元素是什么吗?Html元素?没错?但是可能你不知道在IE4-6的版本中还有一个神秘的父元素存在,它在IE4-6中是被正常处理的,所以我们可以这样写:

  * html p {font-size: 5em; } 

  5、星号加号(*+) 

  这种符号适用的浏览器为IE7

  *:first-child+html p { font-size: 5em; } 

  *+html p { font-size: 5em; } 

  注意:这个hack只在IE7标准模型里工作正常,在怪异模式下不能用同时IE8也能兼容。

  6、子选择器(>) 

  由于IE6和早期的版本不支持“子选择器”(>),所以我们可以利用这个为其它浏览器指定特别的规则。

  例如:

  html > body p { color: blue; } 

  7、子选择器加注释(>/**/) 

  由于IE7是支持子选择器的,所以当你不想IE7识别后面的规则时,可以使用“>/**/”这个特殊符号喔。这样IE7就会就和较早版本的浏览器一样,不识别后面的规则。

  html >/**/ body p { color: blue; } 

  以上就是小编为大家带来的特殊符号类型的CSS hack技术,大家如果遇到类似的浏览器兼容问题,不妨使用上面的特殊符号,这样可以令你以最简短的代码在各个浏览器得到自己理想的效果喔!

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程