网页兼容性

IE8

 本文针对IE8兼容性调整，对于Chorm/FF/opera 均采用增加前缀处理，不详细讨论

  • CSS3
  • html5
  • 文档模式

 

一、CSS3 兼容性

支持 CSS3 的浏览器 : IE9+ / Chrome / Safari / Firefox / Opera 
 
 

模块 

  1. 边框
  2. 背景
  3. 文本效果
  4. 2D/3D转换
  5. 动画
  6. 布局

边框

  • border-radius
  • box-shadow
  • border-image

背景

  • background-size
  • background-origin

文本效果

  • text-shadow
  • word-wrap

字体

  • @font-face 

2D/3D 转换

- transform 下 2D转换

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

- transform 下 3D转换

  • rotateX()
  • rotateY()

动画

  • transition 过渡动画
  • @keyframes 兼容性 IE10+
  • animation

布局

  • column-count
  • column-gap
  • column-rule
 
 
 
解决方案
      官方文档给出了2种使用方式，一种是引入.htc文件，另一种则是使用PIE.js。如果使用第一种方法，则需要书写的CSS3样式下写：behavior: url(pie.htc)，且该文件必须放在跟目录下，因为htc是从跟目录下开始遍历。由于某种原因，您无法修改服务器配置（例如公用主机，或是空间服务商提供的服务器），您可以用一个PHP文件来间接调用htc文件。通过PHP文件来增加一个含有“text/x-component”字样的Content-type头，同时调用pie.htc文件。需要将pie.php和pie.htc放在同一个文件夹目录下。
<?php  header( 'Content-type: text/x-component' );  include( 'pie.htc' );  ?>

     如果你是通过nginx来托管此文件，只要在Nginx的配置文件中加入一条MIME规则即可。我建议使用Flask来托管它（放在static文件夹中），这样更方便，然后只需加入下面的代码：

import mimetypes
mimetypes.add_type('text/x-component', '.htc')

 

二、HTML5 兼容性

支持HTML5 浏览器：IE9+（IE9部分支持）/ Chrome / Safari / Firefox / Opera 

 

 

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

详细标签：http://www.w3school.com.cn/tags/index.asp

 

让低端浏览器兼容HTML5 标签

1.添加JS代码

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); 
var i= e.length; 
while (i--){ 
      document.createElement(e[i]) 
} 
<style> 
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{ 
     display: block; 
} 
</style>

2.添加插件

<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

3. html5shiv

　

一些细节：

  • 关于max-width
  • 嵌套inline-block下padding元素重叠
  • placeholder
  • last-child
  • background-size: cover
  • filter blur

 

 

三、文档模式

1.IE的兼容性视图 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 调用IE最新版本文档模式

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

国内的浏览器通常是通过访问 meta标签来确定如何渲染。以下是360浏览器的官网说明：

“由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。

尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下，我们仍然无法达到百份百正确。因此，我们新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，那么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。”

解决方案

<meta name="renderer" content="webkit">

 

2.声明DOCTYPE，浏览器会确认是HTML 还是XHTML

会影响：

  • 标签、attributes、properties等影响
  • 影响各种渲染模式(标准模式、混杂模式)的解释影响

目前最佳

<!DOCTYPE html>

正确使用<DOCTYPE>

 

四、其他

IE8

  • 不支持 input[type=text] 这种写法
  • 媒体查询 media Query (解决方案：使用Respond.js)
    • 有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如.container）进行覆盖，那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important。
 

　　CSS3兼容

1. 针对非IE浏览器，兼容CSS3的前缀
-webkit- chrome      兼容
-moz-    火狐(FF)     兼容
-o-      欧朋(opera)  兼容
-ms-     IE9         兼容

 

 
2. IE9一下，兼容CSS3，用PIE.htc
min-height 和 min-width 兼容
IE6下
min-height 失效，但是height 可以作为自动填充的功能，所以用HACK（_height: /*IE6 */）达到预期效果
 

 　　其他IE低端浏览器兼容

inline-block 兼容
IE6 IE7下兼容，具有layout 特性，但是不具有行内特性
        display: inline-block;
        *display: inline;
        *zoom:1;
IE7以下没有inline-block属性，为了触发haslayout属性，zoom：1可以触发haslayout：true，在通过设置display:inline具有行内特性
 
盒模型兼容
有DOCTYPE声明，浏览器使用标准模式(Standars mode，也叫Strict mode)，没有声明的DOCTYPE浏览器使用怪异模式（Quirks mode）
IE下
非IE下
 
position:fixed 兼容
IE6不兼容
_position: absolute;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
fixed抖动
*html{
        background-image:url(about:blank);
        background-attachment: fixed;
   }
 
外边距 margin
1. margin 没有继承性
2. IE6 下的双边距问题
   原因：产生的条件是：block元素+浮动+margin。
   解决办法：inline
3. 上下边距重叠
    现象：
  • 常规文档流中，当上下两个存在margin时，取最大的；当存在负值时，则用最大的减去负值的绝对值。
  • 浮动中，上下两元素margin不重合
  
行内对齐
图标与行内文字大小不一致时，希望居中对齐。
vertical-align:text-bottom; 
 
浮动相关
1. 浮动与图片
浮动li 包含图片则有图片不随着浮动排列，而是以实体的形式依然布局。
 
2. 高度塌陷
    解决方法：
  • <div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿
  • .fix{overflow:hidden; zoom:1;} ，但是注意，有相关定位如position，margin负值时，会产生影响
  • .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;} 推荐使用
 
浮动相关资料：
CSS float浮动的深入研究、详解及拓展(二) ：http://www.zhangxinxu.com/wordpress/?p=594
 
HACK
特殊标签 !important 
 
CSS Hack
Chrome FF IE7+下 
!important > 正常
IE6
*html > !important = 正常 = *
 
 
条件注释法
只在IE下生效 <!--[if IE]>...<![endif]-->
只在IE9下生效<!-- [if IE 9]>...<![endif]-->
在IE9以下（包括IE9）<!-- [if lt IE 9]> ... <![endif]-->
在IE6以上（包括IE6）<!--[if gte IE 6]>... <![endif]-->
非IE浏览器<!--[if !IE]>... <![endif]-->

 

 
 
技巧：越早期的hack越往前放。
<!--[if it IE7 ]><html class="ie6"><![end if]>
 
添加前缀前缀
使用 *+html 文档必须使用标准模式( 声明DOCTYPE )
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
 
例如：
.a{
     color: red;
     _color: #ccc; // IE6
     *color: blue;  // IE6 IE7
     #color: red;   // IE6 IE7
     font-weight: bold  !important; // 除了IE6 ，优先级最高
}

 

IE6 调用!important 时，必须单独使用样式
.a{font-weight: bold !important} // 有效
.a{font-weight: normal; }
IE6 会显示bold
 
 
全兼容 渐变效果 头颜色#F3A8A8 尾颜色#e23b2e
background: #E4E4E5;  /* Old browsers */
background: -ms-linear-gradient(top,#f2f2f2,#d5d6d8);
background: -moz-linear-gradient(top,#f2f2f2,#d5d6d8); ;/*FF 3.6+ */
background: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#d5d6d8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,#f2f2f2,#d5d6d8);
background: -o-linear-gradient(top,#f2f2f2,#d5d6d8);
-pie-background: linear-gradient(top,#f2f2f2,#d5d6d8);
filter:alpha(opacity=100 finishopacity=100 style=1 startX=startX，startY=startY，finishX=finishX，finishY=finishY)
progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3A8A8', endColorstr='#e23b2e',GradientType=1 ); /* IE6-9 */
background: -ms-linear-gradient(top, #F3A8A8 0%,#e23b2e 100%); /* IE10+ 0%表示从头开始 100% 表示结束*/




　


 


 


 








            

            
posted @ 
2014-08-28 13:57 
董大王 
阅读(293) 
评论(0) 
编辑 
收藏 
举报