首页 > 其他分享 >解决IE8下不支持border-radius的问题

解决IE8下不支持border-radius的问题

时间:2023-02-28 21:05:27浏览次数:43  
标签:IE8 htc url PIE html radius behavior border css


最近做了一个项目,是让兼容IE8浏览器的,遇到了IE8不支持border-radius和box-shadow的问题,在网上找了解决方案,主要是借助于PIE.htc,具体的过程,发一个写的比较好的文章(看连接文章之后,如果您还没有解决问题,建议回过头来看看我下面的注意事项,否则可能有坑哦,绝对是善意的提醒,本人就是从坑中爬了好久才爬出来的)


相比其他文章,这个是比较详细的了,但需要注意一个问题:

注意:PIE.htc路径是相对于html文件的,而不是当前css文件哦(通俗点说就是,看从html怎么能找到PIE.htc文件,如果PIE.htc和html同级,就直接 :behavior: url(PIE.htc),如果PIE.htc在html的子辈级,比如在css文件夹下,就是behavior: url(css/PIE.htc))

看个例子:

如果PIE.htc和index.html在同级目录下,index.css是在css文件夹下,如图所示:

解决IE8下不支持border-radius的问题_css

那index.css代码如下:

.wrap{
width:100px;
height:100px;
background-color: #5bc0de;
border-radius: 50%;
behavior: url(PIE.htc);
}

切记:不要写成

.wrap{
behavior: url(../PIE.htc);
}

为了更好的理解,再看个例子:

html,PIE.htc,css的存放路径如下图所示:

解决IE8下不支持border-radius的问题_border-radius_02

index.css代码如下:

.wrap{
width:100px;
height:100px;
background-color: #5bc0de;
border-radius: 50%;
behavior: url(css/PIE.htc);
}

那,如果您实在不理解,简单点的办法,把PIE.htc放在与html同级目录下,那css中引入htc的写法就是:behavior: url(PIE.htc);

还可以利用PIE.htc解决其他IE8不兼容的问题,比如box-shadow, 背景颜色透明度问题等等很多,box-shadow和border-radius的解决方法是一样的,背景颜色透明度问题,看下面的例子:(IE8不支持rgba,当然针对背景颜色透明度问题,网上还有其他的办法,可以自行百度哦)

behavior: url(PIE.htc);
background: rgba(0, 0, 0, 0.55);
-pie-background: rgba(0, 0, 0, 0.55);

ok,完毕 

标签:IE8,htc,url,PIE,html,radius,behavior,border,css
From: https://blog.51cto.com/u_15983333/6091797

相关文章

  • border出现虚边问题解决
    当我们只给元素设置了border-top,没有设置其他边框的时候,如果我们使用了border-radius会出现虚边的情况,如下所示:css代码:div{width:100px;height:100px;border-top:2pxsoli......
  • [LeetCode] 1139. Largest 1-Bordered Square
    Givena2D grid of 0sand 1s,returnthenumberofelementsin thelargest square subgridthathasall 1sonits border,or 0 ifsuchasubgrid doe......
  • 微信小程序border-radius失效问题
    明明设置了border-radius,也设置了overflow:hidden,预览也没事,就是真机不行。其实就是父级设置圆角属性失效,父元素使用border-radius和overflow:hidden做成圆形,子元素如果使......
  • redis georadius源码分析与性能优化
    原文地址:https://blog.fanscore.cn/a/51/背景最近接到一个需求,开发中使用了redisgeoradius命令取附近给定距离内的点。完工后对服务进行压测后发现georadius的性能比......
  • 被低估的border-image属性
         来源:https://www.zhangxinxu.com/wordpress/2022/02/css-border-image-tap-highlight/ ......
  • CF1787G Weighed Tree Radius
    CF1787GWeighedTreeRadius前言:NGC5457发现这道题的题目名字打错了,应用"Weighted"而非"Weighed"。首先将“半径”转化为求直径的一半,这样考虑的东西就是不带有方......
  • 【题解】P4482 [BJWC2018]Border 的四种求法
    思路SAM+树剖。好仙的题啊,做了一天。令\(\operatorname{lcs}(i,j)\)表示长度为\(i,j\)的前缀的最长公共后缀长度,则题目中的border可以等价转化成:求最大且满足......
  • border 的一些性质
    有时候一些神仙字符串题会用到border的性质来转化或者证明复杂度,记一下这些有用的结论。记号:字符串:\(s_{1,...,n}\),长度为\(|s|\)子串:\(s_{[l,r]}\)前/......
  • border树模板
    P5829【模板】失配树关键这里的前缀和后缀是不能包含自己的,其他就是板子代码#include<bits/stdc++.h>usingnamespacestd;constintM=1e6+5;chars[M];intne......
  • 【Unity Shader】Special Effects(二)BorderFlow 边框流动(UI)
    更新日期:2021年8月23日。Github源码:​​​[点我获取源码]​​索引​​BorderFlow边框流动​​​​思路分析​​​​流光区域​​​​流光区域的中心点​​​​流光区域的......