border-radius在IE8浏览器兼容方案

怼烎@ 2022-04-10 14:39 224阅读 0赞

##### 问题现象 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #login{ 
                width: 200px;
                height: 50px;
                background-color: #1cc09f;
                border-color: #00a3ff;
                border-radius: 9px;
            }
        </style>
    </head>
    <body>
       <button id="login">登录</button>
    </body>
    </html>

在ie8以上浏览器,显示如下:  
![在这里插入图片描述][20190111151830496.png]  
在ie8浏览器显示如下:  
![在这里插入图片描述][20190111151810538.png]  
发现ie8浏览器对css3的属性border-radius不支持

##### 解决方案 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/PIE.js"></script>
        <style>
            #login{ 
                width: 200px;
                height: 50px;
                background-color: #1cc09f;
                border-radius: 9px;
                border-color: #00a3ff;
                behavior: url(js/PIE.htc);
            }
        </style>
    </head>
    <body>
       <button id="login">登录</button>
    </body>
    </html>

显示结果:  
![在这里插入图片描述][20190111152643206.png]  
PIE.HTC下载地址：[http://css3pie.com/][http_css3pie.com]

[20190111151830496.png]: /images/20220328/6883cf76775f4c4fb49e8ef27109bb4b.png
[20190111151810538.png]: /images/20220328/b2a7b1093e5c49939fdfd1c8e292e583.png
[20190111152643206.png]: /images/20220328/265d2f7ed2ac45b7b5500665ca6e13f5.png
[http_css3pie.com]: http://css3pie.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE8如何兼容placeholder解决方案

IE8如何兼容placeholder解决方案 ie8和ie9中会出现placeholder不兼容的问题。原因：placeholder是h5的新属性，IE10以前的浏览

傷城~/ 2023年05月28日 05:02/ 0 赞/ 18 阅读

相关 border-radius 兼容 IE8浏览器

我们都知道，前端开发最让人头疼的事情，就是兼容ie系列的浏览器了，不但麻烦还让人头秃，今天记录一个border-radius属性IE8浏览器兼容的问题。在IE8浏览器里面，bo

男娘i/ 2023年02月14日 10:38/ 0 赞/ 144 阅读

相关 ie浏览器兼容——scrollTop

ie浏览器兼容——scrollTop ![在这里插入图片描述][20210316114528314.png] 报错 ![在这里插入图片描述][2021031611

以你之姓@/ 2022年11月10日 03:59/ 0 赞/ 299 阅读

相关针对IE浏览器的兼容性ie7、ie8、ie9

相对于来说浏览器的兼容性对于小伙伴来说是很头疼的吧！今天我在修改代码的时候，对于var cvts = document.getElementsByClassName("ap

- 日理万妓/ 2022年09月16日 13:27/ 0 赞/ 383 阅读

相关 ie浏览器兼容

ie低版本浏览器默认很多标签是自带样式的。 ul默认室友padding-left 40px li标签的默认样式是跟其他浏览器不一样的。默认情况下，Firefox中lis

灰太狼/ 2022年07月16日 00:45/ 0 赞/ 312 阅读

相关 ie浏览器兼容笔记

某某：’经理让你兼容ie浏览器’。我的内心：’$%!%&\+~\@’。 1.html代码写法不标准。有的html代码不够严谨，就会造成在ie浏览器下各种的问题。

红太狼/ 2022年07月13日 14:09/ 0 赞/ 310 阅读

相关 ie浏览器兼容笔记

ie低版本浏览器默认很多标签是自带样式的。 ul默认室友padding-left 40px li标签的默认样式是跟其他浏览器不一样的。默认带有左边距16

逃离我推掉我的手/ 2022年07月13日 00:19/ 0 赞/ 309 阅读

相关 IE8 兼容 border-radius 属性方案

1. IE利用VML矢量可标记语言作为画笔绘出圆角 IE8及一下不支持 border-radius属性，如果要想在IE浏览器中实现圆角的效果 1. IE利用VML矢

快来打我*/ 2022年05月23日 10:25/ 0 赞/ 202 阅读

相关 border-radius在IE8浏览器兼容方案

问题现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

怼烎@/ 2022年04月10日 14:39/ 0 赞/ 225 阅读

相关 IE等浏览器兼容

一、IE： $('.box').css({ display: 'block' }); 'block’不能有空格，'block '会没有效果二、IE10及以下：

忘是亡心i/ 2022年02月03日 12:29/ 0 赞/ 346 阅读