IE8关于box-shadow、border-radius不兼容ie8的解决办法

最新推荐文章于 2023-03-03 21:51:37 发布
最新推荐文章于 2023-03-03 21:51:37 发布
阅读量354 收藏
点赞数
分类专栏： 大前端爬坑之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/105079772
版权
本文介绍了如何解决IE8浏览器对于CSS3的box-shadow和border-radius属性不支持的问题。通过引入Pie.htc行为文件，可以实现IE8对这两种效果的兼容。具体实现代码包括对div和p元素的样式设置，并提供了PIE.htc的下载链接。
摘要由CSDN通过智能技术生成

IE8关于box-shadow、border-radius不兼容ie8的解决办法

 

先说 box-shadow:

<style>

.div{

width:500px;

height:200px;

border: 1px solid #eaeaea;

behavior: url(pie.htc);

 

-moz-box-shadow: 0px 0px 14px 1px #eaeaea;

-webkit-box-shadow: 0px 0px 14px 1px #eaeaea;

 box-shadow: 0px 0px 14px 1px #eaeaea;

 

}

 

</style>

<div class="div">

   边框阴影
</div>

 

PIE.htc下载地址：http://css3pie.com/download/

 

同样

了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
专栏目录
订阅专栏
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
08-18
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
box-shadow IE8兼容处理
weixin_30383279的博客
03-23 199
根据canisue（http://caniuse.com/#search=box-shadow），box-shadow兼容性如下图所示： 测试代码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> ...
ie8实现border-radius(box-shadow)的效果
笑到世界都狼狈的博客
08-06 858
项目中要求兼容ie8，但是border-radius并不兼容ie8，那么要怎样做到兼容呢？我在网上百度了解到一种方法是可以兼容ie8圆角的，所以就记录下来，方便以后的使用(box-shadow同样有用) 首先，看一下我们平时是怎么写圆角的 如上图所示，ie8里的效果并不是我们想要的，我们希望ie8里面显示的也是个圆，所以这个时候主要就出来了。。。。 1.首先下载PIE.htc,下载地址h...
解决IE8下不支持border-radius的问题
冰雪为融的博客
09-23 1万+
最近做了一个项目，是让兼容IE8浏览器的，遇到了IE8不支持border-radius和box-shadow的问题，在网上找了解决方案，主要是借助于PIE.htc，具体的过程，发一个写的比较好的文章(看连接文章之后，如果您还没有解决问题，建议回过头来看看我下面的注意事项，否则可能有坑哦，绝对是善意的提醒，本人就是从坑中爬了好久才爬出来的) https://blog.csdn.net/jiang_...
box-shadow兼容IE8浏览器写法
vivi0323的专栏
03-14 1046
-moz-box-shadow:3px 5px 5px #969696;-webkit-box-shadow:3px 5px 5px #969696;box-shadow:3px 5px 5px #969696;filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);...
CSS text-shadow，box-shadow，border-radius属性
09-25
CSS中的text-shadow、box-shadow和border-radius属性是用于增强页面视觉效果的重要工具。这些属性自CSS3版本起被广泛采用，并在现代网页设计中扮演着至关重要的角色。下面将分别对这三个属性进行详细解释，并探讨...
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
12-13
RGBa前三个值是RGB色值，最后一个值是十进制的alpha不透明度值（0=透明，1=不透明）CSS 3 RGBa实现半透明背景RBGa可以用于任何更颜色相关的属性，例如字体颜色、边框颜色、背景颜色、阴影颜色等。RGBa可以应用在所有...
border-radius IE8兼容处理的方法
11-21
然而，`border-radius` 在早期的浏览器，特别是Internet Explorer 8 (IE8) 中是不被支持的。这导致了在开发跨浏览器兼容的网站时，需要采取一些特殊的技术来确保在IE8上也能呈现类似的效果。 首先，根据Can I Use...
css - 关于IE8 不支持 border-radius 属性问题（圆角）的解决方法
sunshime的博客
04-06 1104
  最近在做几个pc端的页面的时候涉及到了各种浏览器的兼容问题，这里总结一下关于IE8 不支持 border-radius 属性问题（圆角）的解决方法。 一、问题：IE8 不支持 border-radius 属性问题（圆角）   二、解决方法   使用 css pie.htc 就可以解决了。具体如下： /* 在css样式中引入 PIE.htc 文件 */ behavior: url(css/PIE.htc); border-radius: 50%; ps：PIE.htc文件可以直接去网页上下载
html text-shadow ie8,box-shadowIE8兼容处理方法介绍
weixin_39677203的博客
06-11 192
根据canisue(http://caniuse.com/#search=box-shadow)，box-shadow兼容性如下图所示：测试代码：* {margin: 0;padding: 0;}#header {width: 400px;height: 400px;margin: 10px;background-color: #999999;box-shadow: 3px 3px 5px #00...
html text-shadow ie8,box-shadow IE8兼容处理方法介绍
weixin_28953819的博客
06-11 225
根据canisue(http://caniuse.com/#search=box-shadow)，box-shadow兼容性如下图所示：测试代码：* {margin: 0;padding: 0;}#header {width: 400px;height: 400px;margin: 10px;background-color: #999999;box-shadow: 3px 3px 5px #00...
关于box-shadow、border-radius不兼容ie8的解决办法
u013561722的专栏
01-25 818
本来从css3兼容ie9+挺好的，可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法。之前在网上查到一些说用 PIE.htc 先说 box-shadow: &lt;style&gt; .div{ width:500px; height:200px; border: 1px solid #eaeaea; behavior: url(pie.htc);   -moz-bo...
PIE.htc解决ie8不能兼容css3的新特性（border-radius box-shadow border-image backgrounds RGBA颜色值 png透明）...
weixin_30750335的博客
08-15 167
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　首先今天给大家要说的ie8不能兼容css3的一些新特性 解决办法 下载PIE.htc 下载地址：http://css3pie.com/download/ 不支持的属性 1.border-radius 代码 .one{border: 1px solid #696;padding: 60px 0;text-ali...
CSS3 边框属性详解：border-radius、box-shadow、border-image
青颜的天空的博客
08-03 960
CSS3 有三个边框属性 border-radius box-shadow border-image 1. 浏览器支持 2. border-radius 定义和用法 默认值: 0 继承: no 版本: CSS3 JavaScript 语法: object object.style.borderRadius="5px" ...
一文解决 IE8兼容性
最新发布
lhl_19950105的博客
03-03 352
傻瓜式IE8/9兼容性
box-shadow兼容ie版本
壹间show
07-07 1万+
很多时候，想支持一个css3的一些信de
【CSS】box-shadow在IE和搜狗浏览器中的兼容性问题
而我想……成为一个有趣的妞
10-18 2975
在写了box-shadow之后发现在谷歌、火狐等浏览器都可以正常显示，唯有IE和搜狗浏览器不显示 一开始的代码： -webkit-box-shadow: 5px 5px 5px #605c5cd1; -moz-box-shadow: 5px 5px 5px #605c5cd1; box-shadow: 5px 5px 5px #605c5cd1; 修改之后的代码： -webkit...
css3中的box-shadow(阴影)使用说明和兼容性问题
热门推荐
小丫007的博客
08-30 1万+
css3box-shadow
CSS3技巧：用box-shadow、border-radius和transition打造丰富图片样式
这样，`border-radius`和`box-shadow`将作用于包裹元素而非原始图片，从而确保在各种浏览器中的兼容性。 此外，`transition`属性可用于创建平滑的过渡效果，当图片或其容器的某些属性发生变化时，如大小、位置或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值