如何解决IE8浏览器不兼容CSS3圆角边框问题?(实用篇)

Posted PHP项目中心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何解决IE8浏览器不兼容CSS3圆角边框问题?(实用篇)相关的知识,希望对你有一定的参考价值。

如何解决IE8浏览器不兼容CSS3圆角边框问题?(实用篇)


导语




步骤解析

第一步:

先到CSS3pie.com官网下载PIE.htc兼容插件,具体步骤我在上一篇有介绍过,点击查看详细步骤 

第二步:

把下载好的PIE.htc兼容插件引到html页面来

behavior: url(js/PIE.htc);

写HTML代码:

代码示范




<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8" />

<title>IE8浏览器兼容css3圆角边框例子</title>

</head>

<style>

div {

width: 250px;

height: 50px;

border-radius: 25px;

background: orange;

behavior: url(js/PIE.htc);

}

</style>


<body>

<div></div>

</body>


</html>


例子演示地址:

如何解决IE8浏览器不兼容CSS3圆角边框问题?(实用篇)

  

实现效果:

在IE8浏览器中也可以实现css3圆角边框效果:

  

 技术微周刊 



「技术微周刊」分享技术文章与动态。周刊的内容会挑选出一周的精彩内容,有技术干货、技术动态,也有技术人生,欢迎关注与分享。



php项目中心

以上是关于如何解决IE8浏览器不兼容CSS3圆角边框问题?(实用篇)的主要内容,如果未能解决你的问题,请参考以下文章

border-radius,box-shadow兼容性解决办法

css圆角边框代码,css3中div圆角边框是怎么写的

怎么处理CSS3的边框圆角border-radius?

div css圆角边框怎么设置

div+css如何实现圆角矩形

Bootstrap中实现圆角圆形头像和响应式图片/css3圆角图片阴影效果总结