html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

发布时间：2018-12-10 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

深大云网络在H5开发中解决IE浏览器的兼容问题。浏览器兼容问题可以认为是相同的代码（css,js）在不同的浏览器中执行会产生不同的效果。

中国常见的3大内核：

IE内核：IE浏览器、360浏览器（兼容模式）

Chrome内核：Chrome、360浏览器（极速模式）、搜狗浏览器、腾讯TT浏览器、百度浏览器、傲游浏览器

火狐内核：firefox浏览器

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

_color 比如_color中只会用ie6浏览器执行这句代码。

1）IE6对于微型盒子（高度小于等于18px的盒子）显示是有问题的，它总会维持高度18px；解决办法就是设置font-size:0;

原因:

IE6的渲染机制是以文字为本，总是试图让盒子的高度至少有内部文字的大小。我们声明内容文字大小为0，就好了。

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题
 

_font-size:0;

列子：

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

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;

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

5)图片的边框

IE6、7中，所有有链接的图片，都默认有难看的边框:

<a href=”#”><img src=”” /></a>

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

解决方法：

img{

border: none;

}

6)IE6在不加<!DOCTYPE >文档声明头的时候，会用自己的理解处理盒模型。由“外扩”变成“内减”。Margin居中会失效。

解决办法：添加文档声明头<!DOCTYPE >

正常情况

不加文档声明头<!DOCTYPE >

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

深大云网络在H5开发中解决IE浏览器的兼容问题。浏览器兼容问题可以认为是相同的代码（css,js）在不同的浏览器中执行会产生不同的效果。

中国常见的3大内核：

IE内核：IE浏览器、360浏览器（兼容模式）

Chrome内核：Chrome、360浏览器（极速模式）、搜狗浏览器、腾讯TT浏览器、百度浏览器、傲游浏览器

火狐内核：firefox浏览器

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

_color 比如_color中只会用ie6浏览器执行这句代码。

1）IE6对于微型盒子（高度小于等于18px的盒子）显示是有问题的，它总会维持高度18px；解决办法就是设置font-size:0;

原因:

IE6的渲染机制是以文字为本，总是试图让盒子的高度至少有内部文字的大小。我们声明内容文字大小为0，就好了。

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题
 

_font-size:0;

列子：

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

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;

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

5)图片的边框

IE6、7中，所有有链接的图片，都默认有难看的边框:

<a href=”#”><img src=”” /></a>

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

解决方法：

img{

border: none;

}

6)IE6在不加<!DOCTYPE >文档声明头的时候，会用自己的理解处理盒模型。由“外扩”变成“内减”。Margin居中会失效。

解决办法：添加文档声明头<!DOCTYPE >

正常情况

不加文档声明头<!DOCTYPE >

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题全部内容，希望文章能够帮你解决html5教程-深大云网络在H5开发中解决IE浏览器的兼容问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：CSSHTML
猜你在找的html5相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程