关于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)
最新文章
- [LeetCode] Encode String with Shortest Length 最短长度编码字符串
- JavaScript异步编程(2)- 先驱者:jsDeferred
- Jackson学习资料
- 关于XML文档
- js从0开始构思表情插件
- Robot Framework--05 案例设计之流程与数据分离
- iOS开发数据库篇—SQLite常用的函数
- Gradle 构建 android 应用常见问题解决指南
- Shell编程基础
- VC 实现文件与应用程序关联(转载)
- JAVA与数据库开发(JDBC-ODBC、SQL Server、MySQL)
- Eclipse利用代理快速安装插件
- c语言获取符号位整数和浮点
- Oracle OS认证和口令文件认证方法
- Swift2.0 函数学习笔记
- Unity3d_GUI_2__(能量条的学习)
- 最全面的JS表单验证
- 调试 smallcorgi/Faster-RCNN_TF 的demo过程遇到的问题
- 价值5000元的web报表分享
- Asp.Net Core 使用Swashbuckle.AspNetCore 生成API文档
热门文章
- 业务逻辑:shiro框架的功能实现
- ROS Learning-010 beginner_Tutorials 编写简单的启动脚本文件(.launch 文件)
- ROS Learning-005 beginner_Tutorials 创建ROS程序包(就是软件包)
- docker学习(2)基本命令
- 一个小错误,在for循环中,每次repaint()的时候,记得先把frame涂成白色的。等于擦掉原来的痕迹&#183;。
- 错误页设置,设置HTTP状态码404,500(八)
- springcloud 定义切面实现对请求操作记录日志,方便后面分析接口详情
- java volatile 关键字(转)
- Vue.js 的几点总结Watchers/router key/render
- MPI编程指南