关于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)
关于box-shadow、border-radius不兼容ie8的解决办法的更多相关文章
- CSS常见兼容问题以及解决办法
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...
- css 浏览兼容问题及解决办法 (2)
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...
- HTML兼容问题及解决办法
标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的: <style> .box{ width:400px;} .left{ width:200px;height:300px;back ...
- bootstrap不兼容ie8如何解决
说起bootstrap大家一定都不陌生,可以说是目前最受欢迎的前端框架,简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 但是在实际运用中也会遇到各种各样的问题,比如最近项目中 ...
- 解决IE8下不兼容rgba()的解决办法
rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法. 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表 ...
- css 浏览兼容问题及解决办法 (1)
主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑. ...
- div+css常见浏览器兼容问题以及解决办法
1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图 ...
- js 浏览器兼容问题及解决办法
JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...
- 用javascript操作xml(三)关于Jquery的html()不兼容IE的解决办法
当 $("#xxx").html(data); 不兼容,方法替换为 document.getElementById("xxx").innerHTML=data;
随机推荐
- p2234&bzoj1588 营业额统计
传送门 题目 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额 ...
- STL之priority_queue(优先队列)
priority_queue是一个容器适配器,在这个容器里第一个数据元素是最大的.它的使用场景是什么样:如果12306抢票,为什么黄牛能抢这么多票,感觉12306那边的请求队列是一个优先队列,黄牛的请 ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- C++11新标准:constexpr关键字
一.constexpr意义 将变量声明为constexpr类型以便由编译器来验证变量是否是一个常量表达式(不会改变,在编译过程中就能得到计算结果的表达式).是一种比const更强的约束,这样可以得到更 ...
- Sql Server 判断表是否存在方法
在创建表之前,通常需要先判断该表是否已经存在,如果存在则不需要创建:有时候删除表之前也需要先行判断是否存在,否则会报错. 判断方法大致有以下两种: 方法一: from sysObjects where ...
- 树莓派(Raspberry Pi 3) 使用wifi模块连接网络
树莓派3B内置了wifi和蓝牙模块,启动WIFI模块有两种方式,一种是图形界面,一种是命令行模式. 使用图形界面: 在桌面右上角的菜单栏里面选择wifi,输入密码就可以了. 使用命令行: 第一步:配置 ...
- SQLite 如何清空表数据并将递增量归零
SQLite并不支持TRUNCATE TABLE语句 方式一: DELETE FROM [Tab_User] --不能将递增数归零 方式二: DELETE FROM sqlite_sequence W ...
- 动态合并或定制GridView控件Header头某些列
开发时,有时会对GridView控件头做一些字段合并.多行表头,多列合并,明白了其中的原理,实现起来,均能运用自如.下面Insus.NET分享自己的做法. 创建站点,创建aspx网页,拉GridVie ...
- xshell学习笔记
$0:当前Shell程序的文件名dirname $0,获取当前Shell程序的路径cd `dirname $0`,进入当前Shell程序的目录 echo "hvkjvk" > ...
- javascript判断访问终端,手机端自动跳转
在网页的顶部加入javascript判断代码: function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAge ...