2023年6月21日发(作者：)
浏览器间不兼容原因及解决办法
网页设计遇到最大的麻烦之一莫 过于网页对不同浏览器的兼容性问题了,因为IE 6。0 / IE
7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是 CSS
Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。
一般情况下，我都会兼顾IE 6。0 / IE 7.0 / firefox 2。0浏览器，
下面是用的较频繁的CSS Hack技巧：
用的最广莫过于！important了， 它可以针对IE(IE 7。0能正确理解！important)和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上！important，就可以针对其优先了。所 以为了兼顾IE 6。0与火狐之间的差异,我都会使用！important。
1、仅IE7与IE5。0可以识别
＊+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+html select ｛…!important；｝
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
* html select ｛…｝
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别。
4、html/*＊/ >body select {…}
这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6＊/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/ { display /＊IE6,IE5不识别＊/：none；}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5。5
7、仅IE5不识别，屏蔽IE5
select/＊IE5不识别＊/ ｛…}
这一句是在上一句中去掉了属性区的注释.只有IE5不识别,IE5.5可以识别。
8、盒模型解决方法
selct {width:IE5。x宽度; voice—family ：””｝””; voice-family:inherit; width：正确宽度;｝
盒模型的清除方法不是通过！important来处理的.这点要明确。
9、只有Opera识别
＠media all and （min—width： 0px）｛ select ｛……｝ ｝
针对Opera浏览器做单独的设定.
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
10、IE5。x的过滤器,只有IE5。x可见
@media tty {
i｛content：””；/＊” “*/}｝ ＠import ‘ie5win。css'； /*";｝
｝/* ＊/
11、IE5/MAC的过滤器,一般用不着
/＊＊//*/
@import “ie5mac。css”;
/＊*/
-————-—————-----——---—-—-—-—----—-———--—------————--————-————————-—-
12、IE的if条件Hack 。com提供
〈！-—[if IE］> Only IE 〈！[endif］—-〉 所有的IE可识别
<！--[if IE 5。0]〉 Only IE 5。0 〈!［endif]—-〉 只有IE5。0可以识别
〈！—-[if gt IE 5。0]> Only IE 5。0+ 〈![endif]—-〉 IE5.0包换IE5。5都可以识别
〈！—-［if lt IE 6]〉 Only IE 6— 〈！［endif］——> 仅IE6可识别
〈！--[if gte IE 6］> Only IE 6/+ IE6以及IE6以下的IE5。x都可识别
〈！—-［if lte IE 7］> Only IE 7/- 〈！［endif]——> 仅IE7可识别
——-———-—--———---———---——-—---———-————-—---—————--———-—-——-—---——-
你在写css时样式表加上浏览器标识符就行了，各浏览器区别如下：
IE都能识别＊,标准浏览器（如FF)不能识别*;
IE6能识别＊，但不能识别 ！important；
IE7能识别*,也能识别 !important;
FF不能识别＊,但能识别 ！important；
例如style=”＊width：10px；！important width：20px;"
这样在IE6下宽度为10px，在IE7下宽度时20px
---——————-——————--—-————-———-—————-———----——--——--————--——--———-—
最新的CSS兼容方案，让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的，Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。
.e ｛/＊FF OP*/
background—color： #FF0000
｝
html＊ 。e｛/＊Sa IE7 OP*/
background—color：＃FF00FF
｝
*+html 。e｛
background—color：＃000000;/*OP＊/
＊background—color：＃0000FF;/＊IE7＊/
}
＊ html .e{/＊IE6*/
background-color:#00FFFF ｝
经FF2、OP9。21、OP9。10、Sa3。0。3（pc)、IE7、IE6测试通过，如果你在其他的浏览器版本上测试过
IE6,IE7，FF等浏览器不兼容原因及解决办法（转载）
本文转载，作者:阿里巴巴前端开发，发到这里只是方便以后查看，也给各位需要的朋友。
浏览器的不兼容，大家肯定都是深恶痛绝的,往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源,避免类似的不兼容再次出现。在下不才，归纳几点html编码要素，望能指点各位：
1。文字本身的大小不兼容.同样是font-size：14px的宋体文 字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px,下留白3px，opera下就更 不一样了。解决方案:给文字设定 line—height 。确保所有文字都有默认的
line-height 值。这点很重要，在高度上我们不能容忍1px 的差异.
2。ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
3.还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行.故，内容可能撑破的浮动容器需要定义width.
小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码.
a.
style="border：1px solid red;width:10px”〉
c.〈div style=”border:1px solid red；float：left”〉
4.浮动的清除，ff下不清除浮动是不行的。
纠正大家一个误区,遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从.以下列出ie6的种种劣迹。
5.最被痛恨的，double—margin bug。ie6下给浮动容器定义margin—left 或者margin—right
实际效果是数值的2倍。解决方案，给浮动容器定义display：inline。 margin bug，当外层元素内有float元素时，外层元素如定义margin-top：14px，将自动生成margin-bottom:14px。 padding也会出现类似问题,都是ie6下的特产，该类bug 出现的情况较为复杂,远不只这一种出现条件，还没系统整理。解决方案:外层元素设定border 或
设定float.
引申：ff 和ie 下对容器的margin—bottom，padding—bottom的解释有时不一致,似乎与之相关。
7。吞吃现象，限于篇幅，我就不展开了。还是ie6,上下两个div，上面的div设置背景,却发现下面没有设 置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom：1.这个zoom好象是专门为解决ie6 bug而生的.
8.注释也能产生bug～～~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下，大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案：用“〈!–[if ！IE］〉 picRotate start 〈!［endif]–〉"方法写注释。
9。
10.使用了“float：left;display：inline”的ul的奇怪表现.可以看出这句css是 针对ie6下的double margin bug 而加上的display：inline，这也是我的css体系里的重要一环，在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不 堪。点到为止，这里不能多说哈.
下的留白,大家看这段代码有啥问题:
〈/div〉 把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写 〈div〉 〈img src=”" mce_src=”” /〉
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display：block。
12.失去line—height.〈div style=”line—height：20px”〉〈img /〉文字〈/div〉，很遗憾，在ie6下单行文字 line—height 效果消失了。.。，原因是〈img /〉这个inline-block元素和inline元素写在一起了.解决方案：让img 和文字都 float起来。 引申:大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意.索性让img 和文字都
float起来，用margin 调整。
13。链接的hover状态。a：hover img｛width：300px｝ 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效,ie7、ff下有效.
14.非链接的hover状态。div：hover{｝ 这样的样式ie6是不认的,在ie7、ff下才有效果。
化的a链接，其内套absolute层，absolute层内放置img,ie下,鼠标点击img不会有链接效果,ff、op下正常。
想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙,90%的不兼容问题不需要另起css hack的。
16。无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li 呢？
- 〈/li>
或者
- 〈li>〈/li〉〈div>class=”c">〈/div〉〈/ul〉 或者 〈ul〉
<！DOCTYPE html PUBLIC —//W3C//DTD XHTML 1。0 Transitional//EN www。w3。org/TR/xhtml1/DTD/xhtml1—〉