解决IE8及以下版本css3圆角不能显示的问题

以前实现圆角都是用图片，这样一来不仅增加了页面加载时间，如果要自适应宽度和高度就要再用上滑动门技术，这样有时候要加上很多多余的和无语义的标签，就算为了html代码的简洁然后用js来实现，也要很多多余的代码，很麻烦。而且圆角的背景、颜色也很难改变，很多时候都要改变图片。

如果用css3就很容易了，只要在css中加上几行代码，如下所示：
.site-subNav {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

也可将border:1px solid #000;换成background-color;

这种方法在各主流浏览器都能完美支持，但在IE8及以下版本就不能用了。

解决的办法很简单，在http://css3pie.com/页面下载一个PIE.htc的文件，加载到根目录下，然后在css中加上一句behavior:url(../js/PIE.htc);如下：

.site-subNav {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior:url(../js/PIE.htc);
}

其中文件的路径是相对html的，很奇怪，所以在服务器上最好用绝对路径。

对于有些父元素已经设置了position属性的元素，会出现无法显示的情况，此时可以给元素加上position:relative；如下：
.site-subNav {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
position:relative;
behavior:url(../js/PIE.htc);
}
也可以将父元素的z-index值设大一些。

这样一来其实也挺麻烦的，又不好给每个圆角的元素都加上position:relative，毕竟有可能会出现副作用，如果是在后期才来解决IE问题，此时css部分已经基本完成，此时给元素加上position也可能会影响到其他元素，所以最好在有需要的时候再加。

我在项目中就遇到了这个问题，到后期才来处理IE问题，不仅要给所有圆角元素加上behavior:url(../js/PIE.htc);增加了很多冗余代码；还要找出父元素已经设置了position属性的元素，很明显不可能全部找出来，只能遇到的时候再加上。所以如果要用圆角，最好在项目刚开始就处理兼容问题，可以设置一个类，如下：
.border_radius {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior:url(../js/PIE.htc);
}
然后给所有需要圆角的元素加上这个类，当然，这样也可能很烦，因为有时候很多相同的元素都需要圆角，比如某个ul的所有li元素，如果给每个li都添加类就太麻烦了，所以也可以将页面中需要用圆角的元素的选择器集中起来设置，如下所示：
.site-subNav li, a {
border:1px solid #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
behavior:url(../js/PIE.htc);
}

在项目中还遇到了一个问题，某元素要鼠标放上去出现背景圆角效果，且要求有淡入淡出的效果，因为该元素的文字长度不定，为了将圆角元素包含文字元素实现自适应宽度，因此我使用了jQuery中的wrap()方法和unwrap()方法。但在IE8及以下版本的显示却很奇怪，元素会先出现方框的背景，再变成圆角背景。后来发现是wrap()方法和unwrap()方法的问题，不知道为什么。尽管后来换了很多方法，比如手动添加圆角元素，或是再clone一个有背景的元素等方法，都不同程度上出现问题，最后我们的解决办法是牺牲IE8及以下的浏览体验，改淡入淡出为直接出现，这样就只需要加上一个类就可以了，在其他浏览器仍然使用wrap()方法和unwrap()方法，因此需要加上浏览器判断，虽然使用浏览器判断不合适，但也是不得已的情况下才用，已是能找到的最好的解决办法了，偶尔用一下还是可以的啦~~~

PIE.htc文件其实就是js代码，使用的时候有时候很奇怪，加载了一次后貌似会一直在，发现这个问题是因为偶然的一个机会behavior:url(../js/PIE.htc);解决了一个IE7下的bug。在我的项目中，我给em元素的包含元素设置了height和line-height，line-height可以使em元素垂直居中。但在IE7下em元素却继承了包含元素的height，表现的像块级元素。为了不让em继承height，我想到了强制设置em的height，但这样一来em就不能垂直居中了，设置margin-top也不行，因为毕竟不是真的块级元素。可是奇迹发生了，因为我用上面的方法给em元素加了放上去显示圆角背景的效果，结果刚加载的时候em的margin-top是无效的，当放上鼠标后居然生效了，而且移开后就算背景消失但是maigin-top还是一直生效，最后发现是behavior:url(../js/PIE.htc);起了作用。而且就算移开鼠标后该类被移除，margin-top仍然生效。可能是PIE.htc文件里面代码的原因，暂时还不知道是为什么哈~~~

当然PIE.htc不只用来解决圆角问题，还能解决阴影显示、背景渐变等问题。

以上纯属个人经验，可能有的地方说得不够严谨，望多多指教哈~~~~