关于box-shadow、border-radius不兼容ie8的解决办法
本来从css3兼容ie9+挺好的,可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法。之前在网上查到一些说用 PIE.htc.
But 我就是按照他说的写的没有管用。请教了一下别人才会写了。就我遇到的问题来说吧。
先说 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>
可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:
1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/)
这个就可以
2.虽然文件名称是大写,如果确保路径没问题还不管用时候就试试小写
border-radius:
这个是在做上传头像时候。就是不管你的头像是什么形状,放进去后就是圆的,类似于这样
里边的图片就是这样的,
同样的
<style>
p{
width: 135px;
height: 135px;
border: 1px solid #ddd;
text-align: center;
behavior: url(pie.htc);
border-radius: 50%;
overflow: hidden;
}
</style>
<p>
<img src="data:images/ac1.jpg" alt="" width="232">
</p>
可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:
1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/)
这个就可以
2.虽然文件名称是大写,如果确保路径没问题还不管用时候就试试小写
最后找解决办法的时候发现PIE.htc这个还是可以解决好多属性值,因为没用到就不一 一说了,有兴趣的可以自己去查查。
介绍htc,它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。。(可以参考这个 https://zhidao.baidu.com/question/2119635727166906667.html)
转载于:https://www.cnblogs.com/zxhh/p/6825500.html
关于box-shadow、border-radius不兼容ie8的解决办法相关推荐
- uniapp 开发APP 安卓手机中 在使用nvue时候 border的dashed和radius可能会有冲突的解决办法
uniapp 开发APP 安卓手机中 在使用nvue时候 border的dashed和radius可能会有冲突的解决办法 在开发中发现如果同时给了圆角 和 虚线 虚线属性会有问题 分别设置圆角 四个角 ...
- IE6IE7Firefox浏览器不兼容原因及解决办法
IE6IE7Firefox浏览器不兼容原因及解决办法 一.IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下 ...
- IE6,IE7,FF等浏览器不兼容原因及解决办法(转)
IE6,IE7,FF等浏览器不兼容原因及解决办法 2008-07-15 11:26 本文转载,作者:阿里巴巴前端开发,发到这里只是方便以后查看,也给各位需要的朋友. 浏览器的不兼容,大家肯定都是深恶痛 ...
- 关于浏览器兼容问题的解决办法,全部都在这里了
关于浏览器兼容问题的解决办法,全部都在这里了 参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...
- 移动端浏览器兼容问题和解决办法
问题一:移动端,input的键盘的右下角显示搜索(2个字) 解决:<form action=""><input type="search" p ...
- 戴尔G3 3579笔记本无法使用耳机上的麦克风/声卡驱动异常/无声音/声卡版本不兼容 的一个解决办法
戴尔G3 3579笔记本麦克风用不了/声卡驱动异常/无声音/声卡版本不兼容 的一个解决办法 遇到的问题(症状) 戴尔G3 3579笔记本重装系统后插入耳机不再弹出询问框询问插入的是何种设备 识别不到普 ...
- freemarker导出word勾选复选框兼容wps的解决办法
最近在做需求的时候,有一个需求是根据业务提供的word模板导出根据业务规则填充的数据生成的word,具体做法是: 1.先打开业务提供的word模板,然后点击另存为Word XML文档,再将后缀名修改为 ...
- IE8 兼容background-size的解决办法
.bgpic { background-image:url(''); background-size:cover; filter:progid:DXImageTransform.Microsoft.A ...
- piczoom兼容性问题_浏览器不兼容原因及解决办法
作者:阿里巴巴前端开发 浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现.在下不才,归纳几点html编码要素,望能指点各位: ...
最新文章
- 2018 CVPR GAN 相关论文调研 (自己分了下类,附地址哦)
- Hadoop Streaming二次排序
- 安卓案例:线性布局嵌套
- 2017.9.28 lca 失败总结
- 最短路问题(Bellman/Dijkstra/Floyd)
- c语言课后答案详解,c语言课后练习题答案详解_0.doc
- 服务式GIS实践与发展——REST 服务
- etal斜体吗 参考文献_参考文献的标准格式
- 模拟电路设计(39)---一文搞懂直流电源EMI滤波器
- 原创超简单代码(1.20)
- SecureCRT标签永久显示IP地址
- 【ivew】ivew 中 render渲染多标签
- QQ登录, 腾讯开放平台和QQ互联的坑
- 【ToolBar】Android ToolBar之完全解析
- AB实验你真的了解嘛
- 文件管理系统源代码c语言,文件管理系统源代码
- java助教面试自我介绍_助教老师面试的自我介绍
- Outlook 错误号 0x800CCC0B,怎么解决?
- The IIIustrated Word2vec
- SHOI 2014 全