关于切图10个兼容性问题这样解决

此文章总结了一下在切图工作中常见的关于浏览器尤其是IE8下兼容的一些问题,为了使页面更好的兼容各个浏览器,达到更好的用户体验。

1. Respond.min.js

我们在写页面时,经常会碰到页面在电脑端自适应的页面,并且要求兼容到IE8浏览器,因为是自适应的页面,所以我们会用到Media Query,

即: “@media(max-width:1200px){},” 但是这个属性在IE8浏览器以及IE8以下是不支持的,这时我们可以加载一个js文件,使 IE8以及IE8以下版本也支持Media Query属性; 即:

Respond.min.js是一个快速、轻量的js文件,

用于为IE6-IE8以及其他不支持CSS3  Media Queries的浏览器提供媒体查询的min-width 和max-width特性,实现响应式的网页设计。

其中Media Query 的兼容性如下:

使用方法:引入respond.min.js,但要在css的后面(越早引入越好,在IE下面看到页面闪屏的概率越低,因为做出css会先渲染出来,如果respond.min.js的加载的很后面,这是重新根据media Query解析出来的css会再改一次页面的布局)

<!–[if lt IE 9]>

<script src=”js/respond.min,js”></script>

<![endif]–>

其中:“<!–[if lt IE 9]>”是“html if条件注释”它的含义是当IE浏览器版本小于IE9浏览器版本时,就运行这个js文件,否则就不运行这个js文件(比如:在chorme浏览器下是不识别的)

2. Htmlif条件注释

<!--[IF !IE]><!-->除IE浏览器外都可识别<!--<![endif]-->
 
<--[IF IE]>所有IE可识别<![endif]-->
 
<--[IF IE6]>仅IE6可识别<![endif]-->
 
<--[IF lt IE6]>IE6以及IE6以下版本可识别<![endif]-->
 
<--[IF gte IE6]>IE6以及IE6以上版本可识别<![endif]-->
 
<--[IF lt IE9]>IE9以及IE9以下版本可识别<![endif]-->

 

注意:图中标识的红线是空格,必须严格按照这个样式来写,否则ie9上会出现显示这些字符:

3. html5shiv.min.js

我们在写页面时,html5的新增标签在IE9以下的版本是识别的,所以在IE8以及以下的版本内容是错乱的,解决方案是加载一个js文件,可以让html5的新增标签在ie8以及以下也能正常显示。

用于解决IE9以下版本的浏览器对HTML5新增标签不识别,并导致css不起作用的问题。

<!--[IF lt IE 9]>
 
<script src="js/html5shiv.min.js"></script>
 
<![endif]-->

其中html5新增的标签有:<article><aside><audio><bdi><canvas><command><datalist><details><embed><figcaption><figure><footer><header><keygen><mark><meter><nav><output><progress><rp><rt><ruby><section><source><summary><time><track><video><wbr>

4. CSS3个浏览器兼容问题

1.  Css3选择器的兼容情况

注意:

l first-child 兼容到IE8+(包括IE8)

l Last-child: 兼容到IE9+(包括IE9)

l nth-child(n):兼容到IE9+(包括IE9)

l 解决方案,详见【7.伪类兼容问题】

2.Css3属性的兼容情况

注解

l Css动画只能支持到ie10+(包括ie10),Chrome和Safari是没有问题的

l 如果是ie8以下的动画需要用jquery1.x的动画函数实现,jquery2.x是不支持ie9以下的浏览器的动画效果的。

l 透明度(opacity)和 rgba() 仅支持到ie9+(包括ie9);如果要兼容到IE8,就要用到滤镜,用法:

background: rgba(157,151,162,0.56);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#569d97a2″,endColorstr=”#569d97a2″);

例如:其中“#569d97a2”中后六位(9d97a2)是颜色的十六进制的色值,前两位(“56”)指的是不透明度代表不透明度是 0.56。

l Border radius, box-shadow: 支持到IE9+(包括IE9),IE8的解决方案:详见【6.PIE.htc

5. IOS的字体的问题

我们在写页面是会发现,数字和英文在ios系统中显示异常,经过研究发现,IOS系统中是识别微软雅黑的字体的,所以在定义字体的时候要写上IOS系统的默认字体,IOS默认的字体为

中文字体:STHeiti

英文和数字:Helveticas

所以在定义字体的时候,要注明Ios

font-family:”微软雅黑”,”Helvetica”;

6. PIE.htc

我们知道IE8浏览器不支持css3的属性,这里PIE实际上是指的是一个名为pie的htc文件,即pie.htc,使用CSS的behavior行为,可以调用此文件,然后使IE8也能实现一部分常见的CSS3效果,如:圆角(border-radius)、渐变(gradient)、阴影(box-shadow)。

CSS代码如下(以box-radius为例):

.pie_radius{
 
width:360px;
 
height:200px;
 
background:#34538b;
 
border-radius:8px;
 
-moz-border-radius:8px;
 
-webkit-border-radius:8px;
 
behavior: url(PIE/PIE.htc);behavior:
 
}

7. 伪类兼容问题

在页面中我们通常会用到伪类,以country项目为例,

为了时左右的内容跟上部分对齐,我们常常使用伪类消除左右两边的间距,这样做是正确的,但是伪类的兼容性不好,只能兼容到IE9+,如果客户要求的兼容性是IE9的话,这样做没有任何问题!

但是,如果客户要求兼容性是IE7或是IE8的话,这样做就会出错,因为在IE7和IE8下是不支持伪类的。我们可以用另一种方法解决这个问题。

1) 不必清掉左右两边的内容的左右边距

2) 给循环的元素的父级一个较大的宽度,使其即使在不清掉左右边距的情况下,也能保证内容布局不错乱,跟设计一致!

3) 此时这个父级的宽度显然就跟设计不一致了,可以给这个父级再加一个父级,这个父级的宽度要跟设计一致,并为它加上{overflow:hidden}即可。

如下图: 去掉.sectionSeven .listType的伪类之后,给”.listType” 的父级“.sectionSeven” 的宽度由之前的1000px增加到1010px(增加10px是因为listType的右边距是10px);这样宽度够大,内容就不会错乱,然后为了保持跟设计图一致的宽度,再给.sectionSeven的父级.bigSection的宽度设置1000px(设计图的宽度),同时设置{overflow:hidden},即隐藏掉多出来的部分即可。

切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号