深大云网络在H5开发中解决IE浏览器的兼容问题
2017-03-02 19:50
309 查看
浏览器的兼容问题
浏览器兼容问题可以认为是相同的代码(css,js)在不同的浏览器中执行会产生不同的效果。
中国常见的3大内核:
IE内核: IE浏览器、360浏览器(兼容模式)
Chrome内核:Chrome、360浏览器(极速模式)、搜狗浏览器、腾讯TT浏览器、百度浏览器、傲游浏览器
火狐内核:firefox浏览器
css hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS
code的过程,叫做CSS hack!
_ 这个就是css hack
以上是通过css hack去解决ie的兼容问题
IE浏览器各版本 CSS hack 对照表
_color 比如_color中只会用ie6浏览器执行这句代码。
1)IE6对于微型盒子(高度小于等于18px的盒子)显示是有问题的,它总会维持高度18px;解决办法就是设置font-size:0;
原因:
IE6的渲染机制是以文字为本,总是试图让盒子的高度至少有内部文字的大小。我们声明内容文字大小为0,就好了。
列子:
2)盒子的半透明
Opacity。值为1的时候,表示完全不透明;0表示盒子不可见,完全透明。但是在ie6中也有兼容性。
使用:_filter:alpha(opacity=72);解决兼容问题
3)overflow:hidden来清除浮动,对IE6有兼容性问题。
解决方法:zoom是IE浏览器中的一个属性(不是W3C的属性),用于控制显示倍数。这个属性用于控制页面中的任何元素显示倍数的。
但是在这里我们借助zoom这个属性,设置1,盒子不会放大也不会缩小,但是会触发一个hasLayOut机制(有兴趣的同学可以百度)。
在有hasLayOut机制的情况下,IE浏览器可以用overflow:hidden,_zoom:1来清除浮动的影响。
4)双倍margin问题
当一个浮动的盒子中,有连续的浮动的子盒子,(看marigin的方向,margin为左就是第1项,margin为右是最后项)的margin将会双倍。
5)图片的边框
IE6、7中,所有有链接的图片,都默认有难看的边框:
<a href=”#”><img src=”” /></a>
6) IE6在不加<!DOCTYPE
>文档声明头的时候,会用自己的理解处理盒模型。由“外扩”变成“内减”。Margin居中会失效。
解决办法:添加文档声明头<!DOCTYPE
>
浏览器兼容问题可以认为是相同的代码(css,js)在不同的浏览器中执行会产生不同的效果。
中国常见的3大内核:
IE内核: IE浏览器、360浏览器(兼容模式)
Chrome内核:Chrome、360浏览器(极速模式)、搜狗浏览器、腾讯TT浏览器、百度浏览器、傲游浏览器
火狐内核:firefox浏览器
css hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS
code的过程,叫做CSS hack!
_ 这个就是css hack
以上是通过css hack去解决ie的兼容问题
IE浏览器各版本 CSS hack 对照表
_color 比如_color中只会用ie6浏览器执行这句代码。
1)IE6对于微型盒子(高度小于等于18px的盒子)显示是有问题的,它总会维持高度18px;解决办法就是设置font-size:0;
原因:
IE6的渲染机制是以文字为本,总是试图让盒子的高度至少有内部文字的大小。我们声明内容文字大小为0,就好了。
_font-size:0; |
2)盒子的半透明
Opacity。值为1的时候,表示完全不透明;0表示盒子不可见,完全透明。但是在ie6中也有兼容性。
使用:_filter:alpha(opacity=72);解决兼容问题
3)overflow:hidden来清除浮动,对IE6有兼容性问题。
解决方法:zoom是IE浏览器中的一个属性(不是W3C的属性),用于控制显示倍数。这个属性用于控制页面中的任何元素显示倍数的。
但是在这里我们借助zoom这个属性,设置1,盒子不会放大也不会缩小,但是会触发一个hasLayOut机制(有兴趣的同学可以百度)。
在有hasLayOut机制的情况下,IE浏览器可以用overflow:hidden,_zoom:1来清除浮动的影响。
4)双倍margin问题
当一个浮动的盒子中,有连续的浮动的子盒子,(看marigin的方向,margin为左就是第1项,margin为右是最后项)的margin将会双倍。
1*{ 2 padding: 0; 3 margin: 0; 4 } 5 ul{ 6 float: left; 7 border:1px solid red; 8 list-style: none; 9 } 10 ul li { 11 float: left; 12 background:blue; 13 margin-left: 50px; 14 } 15 </style> 16 </head> 17 <body> 18 <ul> 19 <li>项目文字</li> 20 <li>项目文字</li> 21 <li>项目文字</li> 22 <li>项目文字</li> 23 <li>项目文字</li> 24 <li>项目文字</li> 25 </ul> 26 </body> </html> |
解决方法: 1. 给第一个(或者最后一个)元素,单独的class,设置为一半的margin即可。 2. 给浮动的父盒子添加 zoom:1,触发hasLayOut机制。 给浮动的子元素加上inline即可 _display:inline; |
IE6、7中,所有有链接的图片,都默认有难看的边框:
<a href=”#”><img src=”” /></a>
解决方法: img{ border: none; } |
>文档声明头的时候,会用自己的理解处理盒模型。由“外扩”变成“内减”。Margin居中会失效。
解决办法:添加文档声明头<!DOCTYPE
>
正常情况 | 不加文档声明头<!DOCTYPE > |
相关文章推荐
- 使用一行代码解决IE浏览器兼容问题
- iE浏览器和firefox浏览器中CSS兼容问题解决办法
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- Bootstarp3与ie浏览器的兼容问题解决方案——05/11/17补充说明
- 解决Ubuntu 12.04更新后 ”系统的网络服务与此版本的网络管理器不兼容“问题
- 解决ie浏览器注册事件不兼容问题
- 用NPAPI开发跨浏览器的插件,解决浏览器兼容问题
- 完美解决loadrunner与ie浏览器不兼容问题
- WEB前端开发 解决IE6、IE7、IE8样式不兼容问题
- 使用一行代码解决IE浏览器兼容问题
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
- ubuntu解决“系统的网络服务与此版本的网络管理器不兼容“问题
- IE浏览器各版本与web标准不兼容问题解决方案
- 开发中常遇电磁兼容EMC问题及解决办法
- 解决android开发中Manifest加入网络权限后显示不出界面的问题
- IE浏览器JSON不兼容问题及浏览器版本问题解决
- 安卓开发时酷派手机不打印请求网络信息问题的解决
- 支持Xcode6 IOS使用ZBar二维码扫描开发(解决arm64,arm7s兼容并解决中文乱码问题)
- 关于IE浏览器不兼容placeholder的解决办法(来源于网络_直接复制即用)