下面内容參考与dandanzmc文章。
什么是浏览器兼容问题？
所谓的浏览器兼容性问题，是指由于不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下。我们的需求是，不管用户用什么浏览器来查看我们的站点或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发者常常会碰到和必需要解决的问题。
为什么会出现浏览器兼容问题？
浏览器兼容问题的出现，是由于各个浏览器对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支持<bodyscroll="no">
2) 除ie7不支持body{overflow:hidden}
3) 全部浏览器html{overflow:hidden}
实例：
1) 仅仅有ie7支持<body scroll="no">
- <body scroll="no" ></body>
2) 除ie7不支持 body{overflow:hidden}
- <body style="overflow:hidden" ></body>
3) 全部浏览器 html{overflow:hidden}
- <body style="overflow:hidden" ></body>
2) 禁用中文输入法的问题
问题：
不能在输入框中输入汉字
解决：
用ime-mode:disabled，仅仅在ie系列和ff中有效。谷歌中，尚未找到方法
实例：
- body{text-align:center;900px;position: relative;margin:0 auto;padding:0;}
- #text{
- background-position: center center; background-repeat: no-repeat;600px;height:400px;ime-mode:Disabled;
- }
- <body>
- <div style="margin-top:50px;">
- <textarea type="text" id="text" onfocus="if(this.value=='切换输入法，在此输入中文试试...')this.value=''" title="试试">切换输入法，在此输入中文试试...</textarea>
- </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页</center>
- </body>
3) 禁用粘贴的问题
问题：
不能将内容拷贝到输入框中
解决：
onpaste="returnfalse"。浏览器通用
实例：
- body{text-align:center;900px;position: relative;margin:0 auto;padding:0;}
- #text{
- background-position: center center; background-repeat: no-repeat;600px;height:400px;ime-mode:Disabled;
- }
- <body>
- <div style="margin-top:50px;">
- <textarea type="text" id="text" onpaste="return false" onfocus="if(this.value=='在此粘贴试试...')this.value=''" title="试试">在此粘贴试试...</textarea>
- </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页</center>
- </body>
4) 超链接訪问过后hover样式不出现的问题
问题：
点击超链接后。hover、active样式没有效果
解决：
改变CSS属性的排列顺序:L-V-H-A
实例：
- <style type="text/css">
- a:link {color: #FF0000} /* 未訪问的链接 */
- a:visited {color: #00FF00} /* 已訪问的链接 */
- a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
- a:active {color: #0000FF} /* 被选择的链接 */
- </style>
- <body>
- <a href="http://blog.csdn.net/dandanzmc" target="_blank" id="blog">欢迎訪问我的博客</a>
- </body>
5) li中的内容以省略号显示
问题：
li中内容超过长度时。想以省略号显示，此方法适用于ie7、8、9、10，谷歌，ff浏览器
解决：
li{list-style-type:none;
200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
实例：
- <style type="text/css">
- li{
- list-style-type:none;
- 200px;
- white-space:nowrap;
- text-overflow:ellipsis;
- overflow: hidden;
- }
- </style>
- <body>
- <li>
- 11月24日。在湖南耒阳西站买票的刘丽因“涉嫌盗窃”突然被警方带走。在湖南被拘12天。又转至青海接受调查。待真相大白。刘丽说噩梦不堪回首：“他们搜我的身。屋里有摄像头的……那些天我听得最多的就是‘程序’，这二字在我心中的含义已经变了。
”
- </li>
- </body>
6) 使连续长字段自己主动换行
问题：
当div框固定高度宽度后，输入的文字超过div宽度。超出这个长度。不换行
解决：
word-wrap:break-word
实例：
- <style type="text/css">
- <!--
- div
- {
- 300px;
- word-wrap:break-word;
- border:1px solid red; }
- -->
- </style>
- <body>
- <div id="ff">这里是一行非常长的文字aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
- </body>
临时就整理到这些。当然不止这些，还有非常多。真心认为。这一块要整理的东西非常多，有时候，当这些CSS配上不同的框架后。其样式又有变化。
不同的情况不同的解决方式。这几个仅仅是简单的一种兼容问题。以后多注意点。