博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Hack
阅读量:4555 次
发布时间:2019-06-08

本文共 2250 字,大约阅读时间需要 7 分钟。

一:内部Hack

  

IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6支持下划线,IE7和firefox均不支持下划线。

  IE6 IE7 FF
* ×
!important ×
_ × ×

   下面给出一个实例,在google,火狐下显示红色,IE7显示绿色,IE6显示蓝色的实例。

    CSS_Hack测试        
google:红色,IE7:绿色,IE6:蓝色

  改代码最终显示效果为

   

  一般来说,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

  这样对于IE7来说,写在后面的优先级高,能够覆盖原本给所有浏览器看的。而对于IE6来说,由于写在后面的优先级较高,能够覆盖原本写给IE7和IE6共同看的。而又不会影响到IE7。

  !important的作用,且看下面这行代码

  .div1{ background-color:Red!important; background-color:blue; }  标记为重要,因此IE7与火狐都会认为其优先级较高,从而忽略后面的"background-color:blue;" 而对于IE6来说,因此识别不了!important,因此直接跳过改行代码,显示为蓝色。

   IE8 IE9 Hack

   \9 仅仅IE6789支持,常常用于区分IE与火狐

   \0 仅仅IE8 IE9都支持

   \9\0  仅仅IE9支持

  如以下代码,在火狐,google显示红色,IE8显示蓝色,IE9显示color:Fuchsia色,IE7显示color:Aqua色,IE6显示黑色。

  其实方法都一样,共同支持的写在前面,单独支持的写在后面,以覆盖共同支持的。

  .div1{ background-color:Red; background-color:blue\0; /* ie 8/9*/ background-color:Fuchsia\9\0; *background-color:Aqua; _background-color:Black }

 

 

  二、选择器Hack

  *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

    CSS_Hack测试        
google:红色,IE7:绿色,IE6:蓝色

  以上代码可以理解为:先设置全部浏览器为红色,在设置IE浏览器为蓝色,在设置IE7为绿色。

  注意:

  *+html 对IE7的HACK 必须保证HTML顶部有如下声明:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  CSS Hack还是尽量少用,我看别人的网站一般都看不到Hack代码。页面布局如果合理,基本上是不用写Hack的。

  一些方法总结:

    浮动在IE6里产生的双倍距离问题,可以加个display:inline;来解决

    .div1{float:left; width:100px; margin-left:100px;}

 

    例如这段代码,在IE6里                    而在google里

      

 

 

  三、html头部引入Hack

    

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

实例根据不同的IE实例引入不同的CSS文件。

        

    IE6显示效果为:          IE7显示效果为:

              

    此头部Hack能够仅仅在希望输出的浏览器输出代码。例如上例中,根据不容的浏览器引入不同的CSS文件,根据不同的浏览器显示不同的文字等等。

 

转载于:https://www.cnblogs.com/zhangyanxia/p/4845618.html

你可能感兴趣的文章
9.Mongodb与python交互
查看>>
18-[JavaScript]-函数,Object对象,定时器,正则表达式
查看>>
读取短信回执
查看>>
EF 数据初始化
查看>>
PreparedStatement与Statement
查看>>
WebService -- Java 实现之 CXF ( 使用CXF工具生成client 程序)
查看>>
Factorial
查看>>
Android开发中,9-patch 图片设置背景带来的问题
查看>>
剑指Offer-反转链表
查看>>
[LeetCode]Two Sum
查看>>
java 常用集合list与Set、Map区别及适用场景总结
查看>>
HTML与javascript语法
查看>>
Android学习--网络通信之网络图片查看器
查看>>
[LeetCode] Excel Sheet Column Number
查看>>
安卓广播接收者
查看>>
数组指针和指针数组
查看>>
手动去除集合中重复元素
查看>>
999线监控
查看>>
Redis在python中的使用
查看>>
mysql报错: 1548-Cannot load from mysql.proc. The table is probably corrupted 解决办法
查看>>