转载自：http://blog.csdn.net/dandanzmc/article/details/18772429
什么是浏览器兼容问题？
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
为什么会出现浏览器兼容问题？
浏览器兼容问题的出现，是因为各个浏览器对W3C标准支持的程度不同而导致的。如果网页都是一个标准的话，也不会又这种问题，但微软把自己当成了标准，不遵循网页的规范，所以一些网页即使语法错误也会在IE正常显示，而在FF，谷歌浏览器等不同内核的浏览器中出现“兼容问题”，其实是网页不遵循Web标准。
当前主浏览器的核心是什么？
1) Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。
2) Geckos： Netcape6开始采用的内核，后来的FF也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
3) Presto：目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
4) Webkit：Safari浏览器使用的内核。Google的Chrome浏览器也是采用Webkit。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器还是比较安全的浏览器。
我整理的一些实例，都是在谷歌、IE7、IE8、IE9、IE10、FF中测试过。
实例：
1.问题：隐藏浏览器的滚动条
解决：
1) 只有ie7支持<body scroll="no">
2) 除ie7不支持body{overflow:hidden}
3) 所有浏览器html{overflow:hidden}
2.问题：不让在输入框中输入汉字
解决：
用ime-mode:disabled，只在ie和ff中有效，谷歌中，尚未找到方法
3.问题：不能将内容复制到输入框中
解决：
οnpaste="returnfalse"，浏览器通用
4.问题： 点击超链接后，hover、active样式没有效果
解决：改变CSS属性的排列顺序:L-V-H-A
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
5.问题：li中内容超过长度时，想以省略号显示，此方法适用于ie7、8、9、10，谷歌，ff浏览器
解决：
li{list-style-type:none;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden; }
6.问题：当div框固定高度宽度后，输入的文字超过div宽度，超出这个长度，不换行
解决：
word-wrap:break-word
7.列表不能换行的问题
问题： li设置为浮动，后面的li紧随其后，不能换行
解决： 在下一个li上清除浮动：clear:both
8.如何对齐文本和文本输入框
问题：当input元素在设置了高时，在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象
解决： vertical-align:middle;
9.容器宽度在浏览器中解释不同
问题：不同浏览器下宽度不同
比如说设置width：200px，在iE7、IE8、IE9下显示的是200px，在FF、Chrome、Opera中显示的是220px
解决：
用width:200px; *width:220px，其中iE7、IE8、IE9会识别两个宽度，以后者为准，故宽度为220px，
在FF、Chrome、Opera中，识别第一个宽度，解析后显示宽度为220px
10.Div居中问题
问题：IE7、IE8、IE9在设置了margin-left和margin-right为auto后，并不能使div居中显示，其他行
解决：设定body居中，定义text-algin: center
例如：
<body style="text-align:center;">
<div style="margin-left:auto;margin-right:auto; width:300px; height:200px;" >
div居中问题解决 </div>
</body>
11.min-height问题
问题：IE7、IE8、IE9对min-height不识别，其他无问题
解决：
#box{width: 100px; height: 35px;}
html>body#box{ width:auto; height:auto; width:100px; min-height:35px;}
12.嵌套div标签的居中问题
问题：
假定有一下情况：即div嵌套div
<div id="a">
<div id="b"> </div>
</div>
此时要设置内层div在外层div的居中位置，在外层设置了text-algin为center后，IE7、IE8、IE9显示正常，但是在IE10和chrome和opera和FF仍然显示在居左位置。
解决： 除在外层设置text-algin为center，在内层div中设置margin：0 auto样式
13.td高度的问题
问题：
在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。
解决：暂无解决方法
14.li指定高度后，出现排版错误
问题：
在IE7下如果为li指定高度可能会出现排版错位，其他浏览器无此现象
解决：设置line-height
15.禁止选取网页内容
问题：在需要禁止选取网页的内容，FF用-moz-user-select:none，其他浏览器用onselectstart='return false'
解决：
FF：-moz-user-select:none
其他：onselectstart='return false'
16.如何对其文本和文本输入框的内容
问题：
当input元素在设置了高和设置了text-align:center时，在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象，其他正常，包括opera
解决：
在样式中设置line-height:100px
17.ie8兼容css3的rgba写法
<style>
.box{
background:rgba(0,0,0,.5);
width:100%;
height:200px;}
</style>
兼容写法：
<!--[if lte IE 8]>
<style>
.box{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
zoom: 1;
height:200px;
width: 100%;}
</style>
<![endif]-->
“#7f000000”由两部分组成：
第一部是透明度值：#7f 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。
第二部分是：就是RGB对应的16进制值。
两部分组合好了就成了用在filter里的颜色值了。
这样就可以兼容IE8的rgba了。
RGBA透明值与IEfilter值转换工具：http://www.rockyxia.com/tools/rgba.php
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
