ie8浏览器html圆角问题,css知识点整理-八仙过海各显神通之IE8圆角

IE系列浏览器的诟病就不一一细说了。

比较折磨前端的是客户对IE8的不离不弃，以及傲娇美工对各种新特性的宠爱。

关于IE8及以下版本浏览器无法显示圆角，各路大神也都有相关的文章介绍，但是众说纷纭，可实现性还是需要结合项目做验证。此篇文章算是作为自己工作中遇到的这个问题的一个解决方案总结汇总。

解决方案1：pie.htc

pie.htc算是解决IE8圆角问题比较常用的插件。国外的工程师们不会安于现状，他们总是能使用一些手段使IE浏览器也能支持CSS3的一些属性。这些都是非常有意义的事情，并且能推动技术文明的发展。

啧啧，起高了...还是回到主题上来。直接上代码吧。

CSS:

.pieDiv {

height: 200px;

width: 300px;

background-color: #5bc0de;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

margin: 40px;

behavior: url("css/PIE.htc");

}

html:

效果:

如图，能够使图层实现圆角功能。

image

如果不是图层而是图片呢，能不能使图片实现圆角呢。测试是可以的。

image

但是我们需要知道，所有的方法都不是万能的，也会有它的局限性。

需要注意的点：

IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute 或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。所以，问题来了，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)。

htc文件路径需要时绝对路径。

会给其他属性埋坑，影响其他属性的正常使用，但是为了实现功能，是坑也要入。

解决方案2：ie-css3.htc

这个脚本文件也是应用比较广泛的解决IE上css3问题的方案。

使用方法同上：

css:

.ieCss3Div {

height: 100px;

width: 100px;

background-color: #5bc0de;

-moz-border-radius:8px;

-webkit-border-radius:8px;

border-radius:8px;

margin: 40px;

behavior: url("css/ie-css3.htc");

}

html:

效果：

如果是图层，效果如下，是能实现图层圆角的。

image

如果是图片的情况下：经测试在IE8浏览器下ie-css3不能使图片实现圆角功能

image

需要注意的点：

1：同样是借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

2：behavior需要绝对路径。

3：需要写到对应的HTML里面才能生效。

4：需要添加position：relative；属性。

解决方案3：

使用带圆角的图片，图层可以直接添加圆角图片，图片可以用定位将圆角图片覆盖到上面。

当然能用代码解决的我们尽量不用这么“高大上”的方法。

这样的方法会增加服务器压力，拖慢网页进程。

解决方案4：

使用纯css实现圆角功能

其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

css:

#css2 {

padding: 10px;

background: #5bc0de;

color: #fff;

margin: 0;

}

.r_a, .r_b, .r_c, .r_d {

background: #5bc0de;

display: block; /*让em显示在不同的行*/

height: 1px;

font-size: 18px;

overflow: hidden; /*防止溢出让em变高*/

}

.r_a {

margin: 0 5px;

}

.r_b {

margin: 0 3px;

}

.r_c {

margin: 0 2px;

}

.r_d {

margin: 0 1px;

height: 2px;

}

html:

当我听到那句“想带着你南下·感受四季的变化·。看着窗前的花·，静静发芽·长成了牵挂”时，我的心化了。我也想带着一朵温柔如花的她，走过风风雨雨山川河流，来到温润如水的江南，躲过世俗的嘈杂，与她一起感受四季的变化，看窗台上那朵花慢慢发芽，变成彼此的牵挂。

效果：

image

image

这个纯css实现圆角的功能能兼容几乎所有浏览器，但是只有我自己能看到毛边吗？

image

以上是本次关于IE8圆角问题自己的解决汇总，希望能帮到大家，欢迎指正和补充。