【收集】各种hack

  1. 用!important解决IE和Mozilla的布局差别

    原文出自：http://www.w3cn.org/article/tips/2004/91.html，感谢作者无私奉献！
    !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{sRule !important }，即 写在定义的最后面，例如：box{color:red !important;}。
    最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义。
    值得注意的是，FF对于”!important”会自动优先解析，而IE会忽略。并且一定要将xxxx !important 这句放置在另一句之上。

    .colortest { 
border:20px  solid #60A179 !important;
border:20px  solid #00F;
padding: 30px;
width : 300px;
}

     

    对于ie6和firefox测试可以正常显示，ie7对!important可以正确解释，但是会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，以后这样写：

    #example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

    *+html 与 *html 是IE特有的标签, firefox 暂不支持, 而*+html 又为 IE7特有标签。
    注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

    还有一种方法，来自载时学院——老朱。上边的方法是加上!important，该行语句除了ie会忽略词句，其他都会看到。也可以加“_width:**px;”，那么这条语句，是正好相反，他只有IE6认，其他浏览器都会忽略。　　  注：IE6在解析宽度的时候，会比其他浏览器多解析0.6%，所以做兼容的时候要去掉（这也是来自载时学院的测试）
    总结一下：IE6相对于其他浏览器，解析宽度的时候会多解析2个像素的宽度，即0.6%，做兼容的时候一定要把他减掉，所以利用“!important”对于非IE6识别，“_width”！

    PADDING-TOP: 11px !important;/*针对非IE6。另外，这一句一定要写到上边！*/ 
PADDING-TOP: 9px; /*针对IE6*/

     

      IE6 IE7 FF
    * √ √ ×
    !important × √ √
    _ √ × ×
  2. height解决在IE中①鼠标进入a块即可触发鼠标hover效果，而非移动到文字上②父子定位的padding（前沿科技P212）
posted @ 2013-03-14 20:26  涅磐归来  阅读(193)  评论(0)  编辑  收藏  举报