IE8下圆角的展现，解决IE8下圆角没法显示的问题，ie8及其如下版本兼容性问题之圆角

时间 2020-10-16

标签 css html css3 web 浏览器 fetch url spa 设计栏目浏览器繁體版

原文原文链接

前两天遇到一个在浏览器圆角展现按钮的设计，在IE8下遇到了难点，IE8下按钮变成了方块形状。css

VS html

一顿百度后找到了方案，采用ie-css3.htc的方式能够解决IE8下圆角功能。css3

下载地址： http://fetchak.com/ie-css3/web

具体代码：浏览器

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=EDGE">
    <title>圆角展现</title>
    <style>
        .circle{
            background-color: #349CD3;
            -moz-border-radius: 61px; 
            -webkit-border-radius: 61px; 
            border-radius: 61px;
            height: 120px;
            width: 120px;
            behavior: url(ie-css3.htc);
        }
    </style>
        
  </head>
  <body>
        <div class="circle"></div>
  </body>
</html>

效果以下：fetch

VSui

备注：url

ie-css3的使用方法很简单，在样式里加入behavior: url(ie-css3.htc文件的路径);就能够了（括号里是ie-css3.htc的地址,千万别写错了）spa

ie-css3.htc不单单能够用来解决圆角问题，还能够解决阴影效果，有兴趣的能够试试看。设计