1:doctype没声明,带来的IE浏览器盒模型解析bug
解决: 进行xhtml 正确声明,如strict声明
2:浏览器的初始值不同带来的
解决:进行css初始化
3:自身代码不规范带来的bug,
解决:面壁
4:浏览器的bug带来的
41 IE6, 有双倍margin bug
是指:浮动方向上的margin值会加倍
例如: 某元素 float:left; margin-left的值是10px, 那么页面上会解析为20px;
同时 ,float:right, margin-right也会加倍
解决方案: 设置漂浮元素的_display:inline;
42: 3像素bug,
解决:规范float的用法
43: IE关于a标签的4个伪类的兼容bug
答:对于IE, 如果a:link方式声明了标签的样式
可能会引来 visited伪类的解析异常
解决: 去掉a:link,以 a 来代替1 一些网站为什么只兼容 WebKit 内核浏览器，欧朋HD等其他内核浏览器无法正常访问？
大型网站集中了优秀的技术人才，做到跨浏览器兼容肯定不在话下。纵观国内移动端主流浏览器：UC浏览器、QQ手机浏览器、iPhone,iPad内置浏览器等等， 一大批基于 WebKit 内核 ，只有排在前3以内的 Opera欧朋浏览器用了 Presto 内核，这或许是原因之一。
2 其它内核没有 WebKit 兼容性好，没有它先进？
Opera 的欧朋HD 拥有优秀的 Presto 内核，优异的标准兼容性。一些 Opera 的大牛也是 Web标准的制定者 ，所以 Opera 会 率先支持最新特性 ，比如Flexbox 布局，@supports 等。
3 欧朋HD或其它内核的浏览器只能自己做兼容优化或悲催地访问简版？
在PC端会兼容主流浏览器，在移动端同样有此需求， 跨浏览器兼容性正是前端开发工程师的伟大职责和挑战所在 。
浏览器做兼容存在一些弊端：不好检测网站改版，浏览器的适配可能跟网站的适配产生冲突，有时还需读懂网站的代码逻辑。
移动终端愈发便宜愈发高端，高端的设备打开一个很简陋的网页，简单的图文配上简单的交互，完全没发挥出设备的优势。
4 跨浏览器兼容性为什么重要，为什么要兼容欧朋HD？
兼容性这个话题非常老了，google一下会有成千上万的帖子。简单而言，的网站如果只能在某一浏览器上正常访问，则略显不专业。资讯、社交、应用类网站会因此减少用户 ，电子商务类网站会因此 减少收入 。
欧朋浏览器 已经成为国内移动端主流的浏览器之一，且 欧朋HD 对 HTML5 的支持很不错。 有的网站在的浏览器兼容性不好，真相是它可能并不兼容，成了替罪羊 。
还有一点，喜欢欧朋浏览器的用户，期望访问网站，体验产品，有理由拒绝吗？
============低调的分割线============
书归正传，当前移动互联网的兼容性不是很好，尤其是一些触屏版，仿佛兼容 WebKit 就万事大吉了，仿佛又回到PC端只兼容IE的年代:-(。
欧朋浏览器对应 Opera Mini，欧朋HD对应 Opera Mobile。欧朋浏览器是服务器中转压缩的，突出的是快和省，对HTML5支持不全面；欧朋HD是全功能浏览器，对HTML5支持全面。
做到跨浏览器兼容很难吗？兼容欧朋浏览器和欧朋HD很难嘛？下面跟大家一起探讨。
一、探测浏览器
探测浏览器一般有两种方式：检查 user-agent 字符串和特性检测
检查 user-agent 字符串
欧朋浏览器的 user-agent 像以下格式：
"Opera/980 (Android; Opera Mini/731996/261473; U; zh) Presto/28119 Version/1054"
"Opera/980 (Android 404; Linux; Opera Mobi/OupengHD-13/ADR-1211021236; U; zh-cn) Presto/210254 Version/1200"
Surface IE10 user-agent 字符串：
"Mozilla/50 (compatible; MSIE 100; Windows NT 62; ARM; Trident/60; Touch)"
user-agent 一般包含浏览器和平台信息，可以通过正则表达式加以判断。
var isOpera = function(){
var ua = navigatoruserAgent;
return {
hd : function(){
return /Opera Mobi/test(ua);
},
mini : function(){
return /Opera Mini/test(ua);
}
}
}();
windowonload = function(){
alert(isOperahd());
}
特性检测
比较推荐的做法是特性检测：Opera 的浏览器都有 windowopera 对象，欧朋浏览器和 Opera Mini 还有 windowoperamini 对象。
var isOpera = ObjectprototypetoStringcall(windowopera) === "[object Opera]";
var isOperaMini = ObjectprototypetoStringcall(windowoperamini) === "[object OperaMini]";
如果想节省开发时间，知名的 Modernizr 可以协助完成 HTML5、CSS3 特性检测。
二、使用标准模式
移动端使用 HTML5 doctype 即可，标准模式也兼容没特殊指定 “ Transitional” 的 HTML40+ 和 XHTML 10+ doctype 。
<!DOCTYPE html>
三、更新 CSS 和 DOM API
1 更新CSS
CSS3 新特性在草案阶段都会增加浏览器厂商前缀，一旦正式的标准推出，都会建议浏览器厂商去掉前缀。WebKit 优化的页面通常只加了” -webkit- “前缀，连无前缀版本都没有，很影响兼容性。
一个跨浏览器兼容的 CSS3 特性通常这么写，添加主流浏览器前缀和无前缀版本：
box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); / Safari 4+, Chrome /
background-image: -webkit-linear-gradient(top, #444444, #999999); / Chrome 10+, Safari 51+, iOS 5+ /
background-image: -moz-linear-gradient(top, #444444, #999999); / Firefox 36-15 /
background-image: -o-linear-gradient(top, #444444, #999999); / Opera 1110-1200 /
background-image: linear-gradient(to bottom, #444444, #999999); / Firefox 16+, IE10, Opera 1250+ /
}
有些较常用的 CSS3 特性 Opera 和其它内核浏览器已支持无前缀特性，例如：border-radius ， box-shadow ， background-size ，WebKit 优化的页面如果多加一句无前缀特性，即可多兼容一些浏览器。
box_bgsize {
-webkit-background-size: cover; / Safari 3-4 /
background-size: cover; / Opera, IE9+, Safari 5, Chrome, Firefox 4+ /
}
常用的CSS3 特性对应的 Opera 版本
WebKit 版本
Opera 版本
标准版本
-webkit-border-radius border-radius border-radius
-webkit-box-shadow box-shadow box-shadow
-webkit-background-size background-size background-size
-webkit-background-clip background-clip background-clip
-webkit-transform -o-transform transform
-webkit-transition -o-transition transition
-webkit-animation -o-animation animation
@-webkit-keyframes @-o-keyframes @keyframes
-webkit-box flex flex
@-o-viewport @viewport
1、首先打开Safari浏览器，点击菜单栏上的Safari，并点击下拉的‘偏好设置’。
2、然后在打开的设置窗口中，找到并点击‘高级’选项，如下图所示。
3、接着在打开的高级页面最下方，点击勾选上显示‘开发’菜单，如下图所示。
4、设置完成后，打开要浏览的网站，点击菜单栏上的‘开发’，点击下拉菜单下的‘用户代理’。
5、点击后打开了子菜单，可以看到可以模拟IE7到IE10的浏览器，点击选择一个，如下图所示就完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）