浏览器兼容
来源:互联网 发布:程序员的工作环境 编辑:程序博客网 时间:2024/06/06 17:42
关于IE的兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
说明:IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是Chrome浏览器内核),那么就用Chrome内核来渲染。
浏览器IE7
浏览器IE8
1.圆角border-radius
2.Opacity元素
解决办法:Visibility该属性类似opacity属性,该属性值为hidden的时候,元素将会隐藏。
#dialogBg { background-color:#000; filter: alpha(opacity=60); background: rgba(0,0,0,0.6);}
3.元素:last-child,nth-child(n)
解决办法:case-c内包含5个col-md-case
.case-c .col-md-case { float: left; width: 18%; padding: 0; margin: 0 1.25%; background: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.04);}.case-c .col-md-case:first-child { margin-left: 0;}.case-c .col-md-case+.col-md-case+.col-md-case+.col-md-case+.col-md-case{ //一个是第一个、两个是第二个 margin-right: 0;}
4.@miedia
5.Media Query
说明:Bootstrap3的官方文档中已经针对浏览器兼容性做了比较详细的说明,推荐采用Respond.js解决此问题,具体方法参见它的文档即可。
有一个地方需要注意的是,如果对Bootstrap3 media query声明的属性(比如.Container)进行覆盖,那在不支持media query的浏览器中Respond.js起作用后,会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important。
6.SVG格式的图片
<svg width="18" height="18"> <image xlink:href="images/svg/search.svg" src="images/png/search.png" width="18" height="18" /></svg>
7.background-size
解决办法:
background: url(../images/yue-bg.png) left top no-repeat;background-size:cover;/*针对IE8的hack,目的是除掉之前background*/background: none\9;/*下一行为关键设置*/filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yue-bg.png', sizingMethod='scale');
8.rgba()
9.
浏览器IE9
阅读全文
1 0
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 4、表达式
- WOJ1213-Area
- Detour工具包使用
- TC358743XBG/TC358749XBG(\w Scaler):HDMI转MIPI CSI东芝转换芯片
- HDU 6058 Kanade's sum(思维)
- 浏览器兼容
- 浅谈CSRF攻击方式
- 正则表达式
- meven dos下构建项目失败
- 面试总结贴
- 互联网金融平台如何选?超级干货来啦~
- 简单比较版本名称大小,如1.8.1,2.10.0等
- 分布式事务处理总结
- Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker