简易详细介绍CSS hack的应用

日期:2020-12-12 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

css hack 是个很有争议的物品,1刚开始我也很反感,由于我感觉能够饶过 css hack,根据此外的方式处理难题。可是,伴随着工作中中的持续实践活动,更改了我的见解,css hack 尽管不可以根据 w3c 规范验证,但适度是应用很有将会会使你的 HTML 构造更紧凑型、合理的降低无词义标识或带来别的益处。

1.IE标准注解法
该方式安全性性好,可是不好于开发设计维护保养。例如涉及到到对于不一样版本号IE的css。

<!--[if IE]><![endif]-->         只在IE下合理
<!--[if IE 6]><![endif]-->      只在IE6合理
<!--[if gt IE 6]><![endif]-->  只在IE6以上版本号合理

留意:融合lte、lt、gte、gt、!重要字应用。

2.挑选符前缀法

“*html” 前缀只对IE6起效  "*+html"前缀只对IE7起效

CSS Code拷贝內容到剪贴板
  1. .test{width:80px;}           /*IE 6 7 8*/  
  2. *html .test{width:70px;}  /*IE6*/  
  3. *+html .test{width:60px;}/*IE7*/  

缺陷:不可以确保IE9,10不鉴别*html,*+html,有向后适配风险性。

3.款式特性前缀法:

如“_”只在IE6下起效,“*”在IE6和IE7下起效。一样有向后适配隐患。
.test{width:80px;*width:70px;_width:60px;}

能用于内联款式

CSS Code拷贝內容到剪贴板
  1. :<div style="width:80px;*width:70px;_width:60px;"></div>   

因为IE标准注解法不好于开发设计维护保养,具体中常见的hack方式经常是后二者。

小事例

html 编码

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <p>您的访问器是</p>  
  3. </body>  

css hack 编码

CSS Code拷贝內容到剪贴板
  1. p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30pxfont-size:14px;}   
  2. p { background:url(llq.gif) 90px -170px no-repeat;} /* all */  
  3. p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */  
  4. p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */  
  5. p {[;background:url(llq.gif) 90px -260px no-repeat;]}  /* for sa/ch */  
  6. p { background:url(llq.gif) 90px -50px no-repeat\9;}  /* for ie */  
  7. *+html p { background:url(llq.gif) 90px -20px no-repeat;} /* only for ie7 */  
  8. p { _background:url(llq.gif) 90px 10px no-repeat;} /* only for ie6 */  


查询Demo

由于沒有寻找 op10 的 css hack,因此规范的写法是给 op10 的,随后对于别的访问器写 css hack。

此外,在修补全过程中,我发现了在网上流传的1个 css hack 有难题,这个 css hack 或许有许多人在用,便是[特性:值\0],有的人说这是 ie8 专用的,但我在检测全过程中发现这个 css hack 除 ie8 鉴别外,ff3 和 op10 也能鉴别(ff2 和 ff3.5 不可以鉴别)。