IE8兼容总结

2019-04-03 本文已影响0人 scrollHeart

<--已过时，仅供参考-->

页面部分：

每个Head部分需加入下列标签（针对ie和360的问题）:

1. <meta http-equiv="X-UA-Compatible" content="IE=edge">        //强制360使用最新的内核渲染页面
2. <meta name="renderer" content="webkit">                  //让国产浏览器优先以Chrome内核来渲染页面
3. <!--[if IE 8]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js "></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->

这些处理只针对IE8，所以必须使用条件注释，防止延长加载时间。必须放在head靠前的位置；

样式部分：

Base.css文件是项目共用部分，首先得进行css reset，统一各个浏览器下元素的样式(最好遵循用到哪些标签就清对应标签的样式)。

body{font: 14px/1.5 arial, 'Microsoft YaHei'; color: #999;}
body,dl,dd,h1,h2,h3,h4,h5,h6,p{margin: 0;}
ul,ol{margin: 0; padding: 0;}
li{list-style: none;}
img{border: none; display: block;}
input, textarea{padding: none; border: none; outline: none; resize: none;}
input::-ms-clear, input::-ms-reveal{display: none;}  /*清除ie input默认行为*/
a{text-decoration: none; color: #666;}
a:focus{outline: none!important; -moz-outline: none;}
i{font-style: normal;}
b, strong{font-weight: normal;}
table{border-collapse: collapse; border-spacing: 0}
th, td{padding: 0;}
select{border: 1px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand{display: none;} /* 清除select下拉框在ie下的默认行为*/

如果页面较多、较复杂，为了更好达到样式统一，借用normalize.css来做css reset处理；利用预处理器scss模块方式编写css文件，加速开发速度；页面中的小icon尽量使用自定义字体或雪碧图:

IE8下的一些兼容问题：
1.IE8对CSS3属性支持不好，需引入CSS PIE文件单独进行处理；

CSS PIE支持的CSS3属性有border-radius、box-shadow、border-image、multiple background images、linear-gradient等；
需要注意的点：
a) PIE.htc文件需放在项目根目录；
b) 给对应的元素添加样式时，同时给自身或父级元素加上position： relative；
c) 最后加上behavior： url(pie.htc);

.pie_radius{
width: 360px;
height: 200px;
background-color: #333;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
position: relative;
behavior: url(pie.htc);
}

IE8不支持placeholder属性
IE8下不支持HTML5属性placeholder，不过解决此问题的js插件挺多的，比如：jquery-placeholder。

IE8不支持last-child伪类选择器
first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账。推荐的做法不是使用last-child，而是给最后一个元素设置一个.last的class，然后对此进行样式设置。
IE8不支持rgba(),为IE9以下单独设置样式：

<style>
#box{
width: 100px;
height: 100px;
border: 1px solid #ccc;
background: rgba(0, 0, 0, .5);
}
</style>
<!--[if lt IE9]>
<style type="text/css">
#box{
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr =#7f000000, endColorstr =#7f000000);
zoom: 1;
}
</style>
<![endif]-->

解释下#7f000000，第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

image

5.IE8不支持渐变，兼容办法为：

a{
background: -webkit-linear-gradient(top, #3a8fd8, #449ce9);
background: -moz-linear-gradient(top, #3a8fd8, #449ce9);
background: -ms-linear-gradient(top, #3a8fd8, #449ce9);
background: -o-linear-gradient(top, #3a8fd8, #449ce9);
background: linear-gradient(top, #3a8fd8, #449ce9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a8fd8', endColorstr='#449ce9',GradientType='0')";
} /* IE8 ,GradientType取值为0货1，0代表渐变从上至下，1代表渐变从左至右；*/

火狐下的兼容：
在friefox下用table布局时，如果不设定collapse属性的值为inherit，则其表现为下图（线条宽度会有差别）：

image

设定为inherit值的表现：

image

移动端：

头部meta标签：

<!--1.自适应设备宽度，并禁止用户缩放：-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--2. 在webapp模式下，改变顶部状态条的颜色（ios）：-->
    <meta name="apple-touch-fullscreen" content="yes" />
<!--3. 在webapp模式下，改变顶部状态条的颜色（ios）：-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
<!--4.UC强制竖屏：-->
    <meta name="screen-orientation" content="portrait">
<!--5.UC强制全屏：-->
    <meta name="full-screen" content="yes">
<!--6. UC应用模式：-->
    <meta name="browsermode" content="application">
<!--7. QQ强制竖屏：-->
    <meta name="x5-orientation" content="portrait">
<!--8. QQ强制全屏：-->
    <meta name="x5-fullscreen" content="true">
<!--9. QQ应用模式：-->
    <meta name="x5-page-mode" content="app">

IE8兼容总结

页面部分：

样式部分：

猜你喜欢

热点阅读