《2022年2022年浏览器不兼容问题解决方案 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年浏览器不兼容问题解决方案 .pdf（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、浏览器不兼容原因及解决办法浏览器的不兼容， 大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。在下不才，归纳几点html 编码要素，望能指点各位：1.文字本身的大小不兼容。同样是 font-size:14px 的宋体文字， 在不同浏览器下占的空间是不一样的， ie 下实际占高16px，下留白3px，ff 下实际占高17px，上留白 1px，下留白3px，opera 下就更不一样了。解决方案：给文字设定line-height 。确保所有文字都有默认的line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。2.ff 下容
2、器高度限定，即容器定义了height 之后，容器边框的外形就确定了，不会被内容撑大，而 ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。3.还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff 下内容会尽可能撑开容器宽度， ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width 。小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。a. b.c. d.上面的代码在不同浏览器中是不一样的，实验起源于对小height 值 div 的运用， ，小 height 值要配合overflow:hidden 一起使用。实验好
3、玩而已， 想说明的是， 浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。4.浮动的清除，ff 下不清除浮动是不行的。纠正大家一个误区，遇到不兼容就说ff 烂是不对的，其实更多时候是ie 的奇怪表现让我们无所适从。以下列出ie6 的种种劣迹。5.最 被痛 恨 的 ， double-margin bug。 ie6 下 给 浮 动容 器 定 义 margin-left( 左 边 界 ) 或 者margin-right 实际效果是数值的2 倍。 解决方案，给浮动容器定义display:inline 。6.mirrormargin bug，当外层元素内有float 元素时，外层元素如定义
4、margin-top:14px，将自动生成 margin-bottom:14px 。padding 也会出现类似问题，都是 ie6 下的特产， 该类 bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定 float（漂浮）。引申： ff 和 ie 下对容器的margin-bottom ，padding-bottom 的解释有时不一致，似乎与之相关。7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div 设置背景，却发现下面没有设置背景的div 也有了背景， 这就是吞吃现象。对应上面的背景吞吃现象，还名师资料总结 -
5、 - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 6 页 - - - - - - - - - 有滚动下边框缺失的现象。解决方案：使用zoom:1。这个 zoom 好象是专门为解决ie6 bug而生的。 zoom 属性可以让网页实现IE7 中的放大缩小功能8.注释也能产生bug“多出来的一只猪。 ”这是前人总结这个bug 使用的文案， ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。9. 里
6、加float ，这是一个典型的，棘手的兼容问题，希望引起大家正视，给 li 不同的属性会有不同的解释效果，ff 下的解释稍可理解，ie6 下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在ul 使用心得一文里有相关成果，却没给出问题解决的过程。10.使用了 “float:left;display:inline ” 的 ul 的奇怪表现。 可以看出这句css 是针对 ie6 下的 double margin bug 而加上的 display:inline ，这也是我的css 体系里的重要一环，在ul 使用心得一文中有相关阐述。而这句css 用在 ul 上会让你痛苦不堪。点到
7、为止，这里不能多说哈。11.img 下的留白 ，大家看这段代码有啥问题： 把 div 的 border 打开，你发现图片底部不是紧贴着容器底部的，是 img 后面的空白字符造成，要消除必须这样写 后面两个标签要紧挨着。ie7 下这个 bug 依然存在。解决方案：给img 设定display:block 。12.失去 line-height。文字 ，很遗憾，在ie6 下单行文字line-height 效果消失了。 。 。 ，原因是 这个 inline-block 元素和 inline 元素写在一起了。解决方案：让img 和文字都float 起来。引申：大家知道img 的 align 有 text
8、-top ，middle，absmiddle 啊什么的，你可以尝试去调整img 和文字让他们在ie 和 ff 下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都float 起来，用margin 调整。13.链接的 hover 状态。 a:hover imgwidth:300px 我们想让鼠标hover 时，链接里包含的图片宽度变化，可惜在ie6 下无效， ie7、ff 下有效。14.非链接的hover 状态。 div:hover 这样的样式ie6 是不认的，在ie7、ff 下才有效果。15.block 化的 a 链接，其内套absolute层，absolute 层内放置img，ie
9、 下，鼠标点击img 不会有链接效果， ff 、op 下正常。想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack 的。16.无法彻底清除的float。 如果让 ul 下的 li 具有了 float 属性，如何 clear 浮动的 li 呢？ 或 者class=” c ” 或 者名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 6 页 - - - - - - - - - class=”c” 或者class=”c” 或者
10、上述的组合？这个问题，我无法给出解答。下面有个例子与此相关!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> .cclear:both;overflow:hidden;+overflow:visible .bdborder:1px solid red ul.exlist-style:none; ul.ex lifloat:left;border:1px solid green; sfsdfsfdf sfsdfsfdf
11、 sfsdfsfdf 请在ie 下 测试，仅仅将margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype 必须有， ie6、ie7 下 margin-top:19px 还好好的， margin-top:20px 就出问题了，无法解释。 。 。大家还可以将clear 层换不同的位置测试。解决方案：给ul 属性 zoom:1 （给 li 加 zoom:1 没用）引申：clear 层应该单独使用。 也许你为了节省代码把clear 属性直接放到下面的一个内容层，这样有问题，不仅仅是ff 和 op 下失去 margin 效果， ie 下某些 margin 值
12、也会失效ddff17.ie 下 overflow:hidden 对其下的绝对层position:absolute 或者相对层position:relative 无效。解决方案：给 overflow:hidden 加 position:relative 或者 position:absolute 。 另， ie6 支持 overflow-x或者 overflow-y 的特性， ie7、ff 不支持。18.ie6 下严重的bug，float 元素如没定义宽度，内部如有div 定义了 height 或 zoom:1，这个div 就会占满一整行，即使你给了宽度。float 元素如果作为布局用或复杂的容器
13、，都要给个宽度的。19.ie6下的 bug， 绝对定位的div 下包含相对定位的div， 如果给内层相对定位的div 高度 height具体值，内层相对层将具有100%的 width 值，外层绝对层将被撑大。解决方案给内层相对层 float 属性。20.ie6 下的 bug，内有 的情况下， position:relative 层下的 float 层内文字无法选中。这个bug 迫使我修公用样式库。21.终于来了个ff 的缺点。 width:100% 这个东西在ie 里用很方便， 会向上逐层搜索width 值，忽视浮动层的影响，ff 下搜索至浮动层结束，如此， 只能给中间的所有浮动层加width
14、:100%才行，累啊。 opera 这点倒学乖了跟了ie。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 6 页 - - - - - - - - - IE 与 Firefox 的 CSS 兼容大全CSS 对浏览器器的兼容性具有很高的价值，通常情况下IE 和 Firefox 存在很大的解析差异，这里介绍一下兼容要点。常见兼容问题：1.DOCTYPE 影响CSS 处理2.FF: div 设置margin-left, margin-right 为 auto 时已经居中 , IE
15、 不行3.FF: body 设 置text-align 时 , div 需 要 设 置margin: auto( 主 要 是margin-left,margin-right) 方可居中4.FF: 设 置padding 后 , div 会 增 加height 和width, 但IE 不 会 , 故 需 要用 !important 多设一个height 和 width 5.FF: 支持!important, IE 则忽略 , 可用!important 为 FF 特别设置样式6.div 的 垂 直 居 中 问 题 : vertical-align:middle; 将 行 距 增 加 到 和 整 个D
16、IV一 样 高line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行7.cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅 IE 可以8.FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在 menubar 中插入一个空格。9.在 mozilla firefox和 IE 中的 BOX 模型解释不一致导致相差2px 解决方法：divmargin:30px!imp
17、ortant;margin:28px;注意这两个margin 的顺序一定不能写反，据阿捷的说法!important 这个属性IE 不能识别，但别的浏览器可以识别。所以在IE 下其实解释成这样：divmaring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 10.IE5 和 IE6 的 BOX 解释不一致IE5 下divwidth:300px;margin:0 10px 0 10px; div 的宽度会被解释为300px-10px( 右填充 )-10px( 左填充 )最终 div 的宽度为 280px， 而在IE6
18、 和其他浏览器上宽度则是以300px+10px( 右填充 )+10px( 左填充 )=320px 来计算的。这时我们可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px 关于这个 /*/ 是什么我也不太明白，只知道IE5 和 firefox 都支持但IE6 不支持，如果有名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 6 页 - - - - - - - - - 人理解的话，请告诉我一声，谢
19、了！： ）11.ul 标签在 Mozilla 中默认是有padding 值的 ,而在 IE 中只有 margin 有值所以先定义ulmargin:0;padding:0; 就能解决大部分问题注意事项：1、float 的 div 一定要闭合。例如： (其中 floatA 、floatB 的属性已经设置为float:left;) 这里的 NOTfloatC 并不希望继续平移，而是希望往下排。这段代码在IE 中毫无问题，问题出在FF。原因是NOTfloatC 并非 float 标签，必须将float 标签闭合。在 之间加上 这个div 一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有f
20、loat属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。并且将 clear 这种样式定义为为如下即可：.clear clear:both; 此外，为了让高度能自动适应，要在wrapper 里面加上overflow:hidden; 当包含 float 的 box 的时候，高度自动适应在IE 下无效，这时候应该触发IE 的 layout私有属性 (万恶的 IE 啊！ )用 zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper 如下定义：.colwrapper overflow:hidden; zoom:1; margin:5px auto; 2、margin 加倍的问题。
21、设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个ie6 都存在的bug。解决方案是在这个div 里面加上display:inline; 例如： 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 6 页 - - - - - - - - - 相应的 css 为#IamFloat float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 3、关于容器的包涵关系很多时候，
22、尤其是容器内有平行布局，例如两、三个float 的 div 时，宽度很容易出现问题。在IE 中，外层的宽度会被内层更宽的div 挤破。一定要用Photoshop 或者 Firework量取像素级的精度。4、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 （似乎有时候不会自动往下撑开，不知道具体怎么回事）5、最狠的手段- !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF 对于 !important 会自动优先解析 ,然而 IE 则会忽略 .如下.tabd1 background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */ 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 6 页 - - - - - - - - -