IE浏览器兼容问题总结

IE浏览器兼容问题总结

一.双边距问题
浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。
解决方法:在此浮动元素增加样式   display:inline;

二.图片产生的间隙
父元素直接包含<img>,这个图片下方会和父元素边缘产生间隙。
解绝方法:1.在源代码中让</div>和<img>在同一行,因为那个间隙是由换行符产生的。
            2.给<img>添加样式   display:block;

三.最小高度问题
块元素最小高度为10px,当高度定义小于10px时,仍为10px;
解决方法:为此块元素添加样式   overflow:hidden; 或 让此款块元素的字体大小等于此会元素的高度。

四.列表的li为浮动,则列表后面的元素不能换行的问题
列表的li为浮动,则列表后面的元素不能换行。
解决方法:为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。

五.子元素的上下外边界问题(父元素没有定义高度时)
在父元素没有定义高度时,子元素的上下外边界和父元素上下外边界叠加,并且显示在父元素外面。
解决方法:给父元素定义内边距或边框。

firefox问题:

一.列表的li为浮动,则列表后面的元素不能换行的问题
列表的li为浮动,则列表后面的元素不能换行。
解决方法:为这个ul定义合适的宽高或给包含这个ul 的父div定义合适的宽高。

二.子元素的上下外边界问题(父元素没有定义高度时)
在父元素没有定义高度时,子元素的上下外边界和父元素上下外边界叠加,并且显示在父元素外面。
解决方法:给父元素定义内边距或边框。


二者之间的兼容问题:

一.水平居中
IE6:使用text-align不但能使文本居中,还能使嵌套的块元素居中。
FF2:使用text-align只能使文本居中。
解决方法:在需要居中的块元素添加:margin:0 auto;

二.div高度自适应问题
IE6:如果内容的高度超过父元素的高度,父元素的高度会增加。
FF2 : 如果内容的高度超过父元素的高度,内容不会隐藏,父元素的高度也不会增加。
解决方法:(假定最小高度为50px)在父元素添加   min-height:50px;
                                                                            height:auto !important;
                                                                            height:50px;

三.父元素包含浮动子元素时的高度问题
IE6:高度会被子浮动元素撑开。
FF2:高度不会被子浮动元素撑开。
解决方法:在子浮动元素后面再加一个div,此div的定义:clear:both;
                                                                                          line-height:1px;
                                                                                        visibility:hidden;

四.嵌套元素边距高度的叠加问题(定义父元素宽度时)
IE6:子元素的上边距和父元素的上内边距叠加。
FF2:子元素的上边距和父元素的上内边距相加。 
解决方法:单独使用padding或margin。

五.子元素的上边距问题  (定义父元素高度时)
IE6:子元素上边距显示正常。
FF2:子元素上边距显示在父元素上方。
解决方法:在父元素增加overflow:hidden; 或给父元素增加边框或内边距。

六.子元素负边界问题
IE6:超出父元素的部分会被父元素覆盖。 
FF2:超出父元素的部分会覆盖父元素,但前提是父元素有边框或内边距,不然负边距会显示在父元素上,使得父元素拥有负边距。
解决办法:使用相对定位。

七.列表的默认显示问题
IE6:列表有左边界、下边界、右内边距,同时项目符号在列表外面。
FF2:列表有上下边界、左右内边距、项目符号在列表里面。
解决方法:为ul添加样式:margin:0;
                                        padding:0;


八.<body>的默认padding和margin不同的问题。
解决方法:  给body添加样式:margin:0;
                                            padding:0; 
九.对元素使用绝对定位问题(元素定义外边距时)
IE6:外边距不会视为元素的一部分,因此在对此元素使用绝对定位时外边距无效。
FF2:外边距会视为元素的一部分,因此在对此元素使用绝对定位时外边距有效。(例如margin_top会和top相加)

关于Firefox的问题
一、问题的根本原因是没有清除浮动,部分版本的opera和chrome也会这样,设置高度或者overflow:hidden来清除浮动,即可解决问题
二、margin collapsing问题,这是CSS的规定,不仅仅只有Firefox。虽然很让人困扰,但至少是正常的。当然,解决办法如你所说。

后面的很多“二者之间的兼容问题”,其实应该是IE6与其他浏览器(包括IE7、IE8)之间的兼容问题。

IE8兼容

在<head></head>里面加这句代码:<meta http-equiv="x-ua-compatible" content="ie=7" />    。加上来后就能兼容IE7、IE8啦。或
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


http://hi.baidu.com/fbseovbtsxcfikr/item/13eb0616a3ddfcff9c778a94

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值