浏览器兼容代码 - yahari

浏览器兼容代码

[24/6水,15]

ref:百度文库

Browsers

Signs

IE6

IE7

IE8

√

!important

√

*html

√

*+html

√

说明：“√”代表能识别；“×”代表不识别。

1、案例一

如果各个浏览器的高度都不相同，代码如下：

.warp{ 
  Height:100px;             /*IE6、IE7、IE8、FF识别*/ 

  Height:110px\9;           /*IE8识别*/ 

  *height:120px!important;  /*IE7 识别*/ 

  *height:130px;            /*IE6、IE7识别，但上一段代码中!important的级别比*号的级别高，所以此段 代码只有IE6中才有效*/ 
}

2、案例二

如果浏览器的高度只有IE6和IE7相同，而FF不同，代码如下：

.warp{ 
  Height:100px; /*IE6 、IE7、 IE8、FF识别*/ 
  *height:120px;  /*IE6、IE7识别*/ 
}

3、案例三

对个浏览器单独写不同代码，如下：

.warp{
  height:200px;   /* IE6 、IE7、 IE8、FF识别*/
}   
.warp{
  height:300px\9; /*IE8识别*/ 
}  
*html .warp{
  hegith:210px;   /*IE6识别*/
}   
*+html .warp{
  height:300px;   /*IE7识别*/
}

4、案例四

各浏览器高度只有IE6不同，代码如下：

.warp{ 
  Height:100px;    /* IE6 、IE7、 IE8、FF识别*/ 
  _Height:120px;   /*IE6识别*/ 
}

[30/6火,15]

IE6~IE9 hack兼容写法

.selector{ 
  /*all*/
  background-color:#f00; 

  /* IE 8/9 */ 
  background-color:#0ff\0;

  /* IE9 */ 
  background-color:#0f0\9\0;

  /*IE7*/
  *background-color:#00f;
  
  /*IE6*/ 
  _background-color:#ff0;

  /*非IE*/ 
  background-color//:#090;

  /*所有ie*/ 
  background-color:#900\9;
}

当然，还有专门针对IE7的写法：+background-color:#00f;
不过上述代码，我把background-color改成background时，又区分不出ie9和ie8了，因此，使用的时候最好注意一下。
写法中，要注意顺序(先IE8,再IE9)：

.selector{ 
  /* IE8 */ 
  background-color:#06f\0; 

  /* IE9 */ 
  background-color:#f60\9\0;
}

第一行是针对ie8的。
第二行是针对ie 9的

[1/7水,15]

IE6、IE7、IE8的CSS、JS兼容

IE6 、 IE7 、 IE8 在 CSS 和 JS 方面的区别 :

1、IE8中的css中关于width或是height中如果使用像素形式作为参数时，参数必须是带“px”的，而且此参数必须是大于0的，而在IE6和IE7中是支持不带“px”参数的，而且参数是可以为一个负数。

2、如:style=height:180px\\0;只有IE8能识别,style=height:180px\\9,IE都能识别。

3、IE8中的css中“border-style:outset ;”是没有效果的。

4、IE8中的无序列表之间的距离要比IE6和IE7大的多。

5、IE6能识别*，但不能识别!important,IE7能识别*也能识别!important。

6、IE6支持下划线，IE7不支持下划线。

7、在IE8中，一个Iframe中取event.x的值不是Iframe中的相对x坐标，而是最外层的window的x坐标，但是event.y却是取的是 Iframe中的相对y坐标。而在IE6和IE7中，event.x和event.y却得的都是所在Iframe中的相对坐标，可以用 event.clinetX代替。

8、IE8中的javascript中的function对象例如：

function a(){
  alert("helloworld");
}
var fun = new function('','helloworld');
alert(fun);

此时返回的值为:

function anonymous(){
  function a(){
    alert("helloworld")
  }
}

而在IE6和IE7中返回的值为:

function anonymous(){
  alert("helloworld")
}

也就是说当Function的第二个参数如果是一个函数时，IE8对此参数作用的是整个函数的代码，而IE6和IE7则是对此参数起作用的是函数的内部代码（不包括 “function a（）{”和“}”的函数头和尾）。

8、在IE6中，使用window.status =" 欢迎光临我的博客！！！",就能在状态栏显示这么一行字，但在IE7中，IE7的安全性设置中，默认是不允许脚本更新状态栏的.

9、IE8会把对 IE6,7,8 用CSS进行测试：
测试代码：样式代码： p {color:#f00;}
xhtml 代码：文字

	IE6	IE7	IE8	备注
p{_color:red}	√	×	×	IE6 专用
*html p{color:#red;}	√	×	×	IE6 专用
p{+color:red}	√	√	×	IE6,7 专用
p{*color:red}	√	√	×	IE6,7 专用
*html p{color:red;}	√	√	×	IE6,7 专用
p{*+color: red}	×	√	×	IE7 专用
Body> p{ color: red }	×	√	√	屏蔽 IE6
/\\///p{+color:red}/*/	×	×	√	IE8 专用
p{///color;/**/}	√	√	×	屏蔽 IE8
p{color:red!important} p{color:red}	√	√	√	都能用

IE6 Bugs

1、不支持用样式设置 <abbr> 元素

2、不支持以连字符和下划线开头的 class 和 ID 名

3、 <select> 元素总是出现在堆叠最上面，而无视 z-index 值

4、如果锚点的伪类没有使用正确的顺序 ( :link , :visited , :hover ) ，:hover 伪类将无效

5、一个属性的 !important 声明会被同一规则中同一属性的没有使用 !important 的第二个声明覆盖。

6、height 表现类似于 min-height ， width 表现类似于 min-width ，左右 margin 双倍

7、圆点边框 (dotted) 看起来像虚线边框 (dashed)

8、text-decoration 的 line-through 值在文字上看起来比别的浏览器要高一些

9、有序列表如果有一个固定结构 (haslayout 为 true ，不能设置 li 的高度 / 宽度 /zoom 等激活 haslayout 的值 ) ，序号就不会增加，而是保持为 1

10、列表元素不支持 list-style-type 的所有可用的值

11、如果列表条目浮动，指定的 list-style-image 将不会显示

12、不完全支持 @font-face

13、某些选择器会错误的匹配注释和文档声明

14、如果一个 ID 选择器结合一个类选择器不匹配，同样的 ID 选择器结合不同的类选择器也将被当作不匹配。

IE7 bugs

1、有序列表如果有一个固定结构 (haslayout 为 true ，不能设置 li 的高度 / 宽度 /zoom 等激活 haslayout 的值 ) ，序号就不会增加，而是保持为 1

2、列表元素不支持 list-style-type 的所有可用的值

3、如果列表条目浮动，指定的 list-style-image 将不会显示 4、不完全支持 @font-face 5、某些选择器会错误的匹配注释和文档声明

[2/7木,15]
浏览器内核控制Meta标签说明文档

新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，哪么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。

目前该功能已经在所有的360安全浏览器(6.2以上版本适用)实现

代码示例：在head标签中添加一行代码：

<html>
  <head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
  </head>
  <body>
  </body>
</html>

content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">

各渲染内核的技术细节

内核	Webkit	IE兼容	IE标准
文档模式	Chrome 21	IE6/7	IE9/IE10/IE11(取决于用户的IE)
HTML5支持	YES	NO	YES
ActiveX控件支持	NO	YES	YES

使用meta标签调节浏览器的渲染方式

IE8中有一个“兼容性视图”的概念，当初IE8发布时，相对于IE6/7已经做出了非常大的改进，但是很多老站点仅针对IE6/7进行了优化，使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师，IE8加入了“兼容性视图”功能，这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的，所以需要使用meta标签来强制IE8使用最新的内核渲染页面，代码如下：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。关于此meta标签的具体说明，可参见StackOverflow上的精彩回答。

Summary:

浏览器兼容，meta标签

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />

posted on 2015-06-24 11:34 yahari 阅读(385) 评论(0) 收藏举报

刷新页面返回顶部