解决浏览器兼容新问题

转载地址：http://www.shuonar.com/blog/dc5faa22-aad8-437f-b9c9-f825f8051d77.html
最近发现我的主页(www.shuonar.com)爆出了IE10兼容性问题，自己很纳闷，为什么同样是IE内核会出现兼容性问题?小心求证发现原来是因为ie10默认的渲染模式是ie10，而一般我们测试的浏览器（ie8,ie9）默认的渲染模式是ie6/7.所以在用户使用ie10的时候就会出现css无法正常显示，继而出现页面混乱的情况。
先讲讲ie兼容性问题，其实IE给出了解决方案，google也给出了解决方案，如果打开百度的源代码就会发现会多出一行
1 <metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
这句话的意思是强制使用IE7模式来解析网页代码。
2 <metahttp-equiv=“X-UA-Compatible”content=“IE=8″>这个那是强制IE8模式来解析网页代码
2. Google Chrome Frame也可以让IE用上Chrome的引擎:
<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>
在另一方面使用另外一个方式也可实现兼容性问题
ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、ie6下正确显示。
使IE5,IE6兼容到IE7模式（推荐）
1 <!–[if lt IE 7]>
2 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js”type=”text/javascript”></script>
3 <![endif]–>
使IE5,IE6,IE7兼容到IE8模式
4 <!–[if lt IE 8]>
5 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js”type=”text/javascript”></script>
6 <![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式
7 <!–[if lt IE 9]>
8 <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
9 <![endif]–>
关于IE和firefox的兼容性问题，首先讲讲关于javascript兼容性问题
1. document.form.item 问题
document.formName.item("itemName")这样的语句，在firefox中不能运行
改用 document.formName.elements["elementName"]
2. 集合类对象问题
集合类对象取用时使用 ()，IE 能接受，firefox 不能。
改用[]作为下标运算.
如:document.forms(‘formName’)改document.forms[‘formName’]Document.getElementsByName(‘elementName’)如:document.getElementsByName(‘elementName’)(1)改为
document.getElementsByName(‘elementName’)[1]
3. HTML 对象的 id 作为对象名的问题
(1)现有问题
在IE中HTML对象的ID可以作为document的下属对象变量名直接使用。在Firefox中不能。
(2)解决方法
用getElementById("idName")代替idName作为对象变量使用。
4. element.fireEvent()方法问题
(1)现有问题
在IE中可以使用element.fireEvent()方法，firefox不支持
用 element.click()代替。
2. CSS部分
转载地址：http://www.shuonar.com/blog/dc5faa22-aad8-437f-b9c9-f825f8051d77.html
1. 高度问题
(1)现有问题
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，firefox会固定DIV的高度，超过部分超出DIV底线以外，出现和下面的内容重叠的现象
(2)解决方法：
控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置overflow:hidden; 或height:auto
2. display问题
(1)现有问题
在Firefox中执行后"display:none;"没有回收"display:block;"开辟的页面空间，
下次再执行"display:block;"又会在页面上重新创建显示空间。
(2)解决方法：
将代码style.display="block";
修改为
style.display=""; 或在样式中不写，默认为block
2. 宽度问题
(1)现有问题
IE：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox：对象的实际宽度= (margin-left) + (border-left-width) +(padding- left) + width + (padding-right) + (border-right-width) +(margin-right)
实际像素所以排列好及列的表格时ie和ff显示宽度稍有区别
(2)解决方法：
FireFox: 支持 !important, IE 则忽略,可用 !important 为　FireFox 特别设置样式．

网站兼容性测试网站：http://browsershots.org/

解决浏览器兼容新问题相关推荐

IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题参考文章: (1)IE内嵌google chrome frame解决浏览器兼容问题 (2)https://www.cnblogs.co ...
【转】使用Chrome Frame，彻底解决浏览器兼容问题
[转]使用Chrome Frame,彻底解决浏览器兼容问题参考文章: (1)[转]使用Chrome Frame,彻底解决浏览器兼容问题 (2)https://www.cnblogs.com/xuan ...
javaScript解决浏览器兼容问题,判断浏览器是ie或者Chrome
最近在写一个项目中遇到了一个问题,从java后台输出一段字符串,需要用到这个字符串,返回到页面上面. 假定该字符串为"" 在Chrome上得到的结果是<pre style= ...
20150909解决浏览器兼容问题
1.解决IE9登录成功后,退出,重新刷新页面session里面还有值原因是Ajax在第二次登录成功后,并没有执行退出的请求,直接从浏览器里面得到缓存的data返回值 $.ajaxSetu ...
如何解决浏览器的兼容性
DIV+CSS开发浏览器的兼容性 1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17 ...
浏览器兼容：火狐不支持webq格式图片
记一次解决浏览器兼容的bug: 昨天下午,测试反馈了一个问题:pc端微信复制过来的图片有了防盗链,不能正常显示. 然后就开始了苦逼的解bug流程.问题描述很明白,就是防盗链的事,上网搜了很久,终于在一 ...
JS、Flash 实现复制功能（浏览器兼容）
JS.Flash 实现复制功能 (浏览器兼容) /** 此方法不兼容非IE外的浏览器...参考其它网站的实现方式,是用Flash来解决的此问题 */ function copyOperate(co ...
html5 定义width不兼容,CSS-宽度自适应和浏览器兼容笔记
自适应宽度自适应:网页元素根据窗口或子元素自动调整宽度适用百分比进行设置,例如:100% 铺满:50% 占据一般宽度块元素如果不设置宽度,默认为100% 自适应中可以设置最大或者最小宽度和高度 ...
CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总一.从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...

解决浏览器兼容新问题

解决浏览器兼容新问题相关推荐

最新文章

热门文章