ie6下常见的bug 调整页面兼容性

ie6下常见的bug

我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜。我们需要了解ie6的一些常见bug,这样,更好的调试兼容性,下面小强老师就把一些常见的ie6bug列出来,大家去研究下。

考虑结构的稳定性
最常见的问题就是网页元素位置混乱,错位。

1.1.1.DOCTYPE 必须有

必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。
<!DOCTYPE>
标记和浏览器的兼容性相关,删除<!DOCTYPE>,就是把如何展示HTML页面的权利交给浏览器,这
时,IE6,IE7,IE8,Firefox2,Firefox3,Chrome,有多少种浏览器,页面就有可能有多少中显示效果,这是不被允许的。

1.1.2margin加倍的问题

浮动  margin  但是可能会出现
出现这个问题一般要同时满足两个条件:

盒子要有浮动,在一个就是要要margin,符合这两个条件,一般在ie6下面会出现 双倍边距的问题。

解决方法:

_display:inline;

1.1.3   IE6图片底侧会有像素间隙问题

这个问题啊,再火狐浏览器,也可能出现哦!

1将img标记与/div标记放在同一行
<div><img src="images/jd.gif" /></div>
但是这样写不太方便阅读,我们知道代码的可读性是最为重要的。
所以建议用第二种方法
2.在CSS样式中给img上设置display:block;属性,将图片设为块元素下面代码。
    img{display:block;}
3.浮动

1.1.4   IE6下元素最小高度的问题

在IE6下面,如果想给把元素例如div设置成19像素左右以下的高度设置不了。这是因为IE6浏览器里面有个默认的高度
iE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden  font-size:0;

1.1.5    ie6下面引起多余字符

两个浮动的盒子之间加html注释 会引起多余字符的问题。
 解决方法:
1. 删除注释
2.如果可以不给指定宽度
 
3. 在文字最后面多打一个空格


4.给这个盒子加定位。
.two{width:100px; float:left; position:relative;}

1.1.6  IE6下文字混排浮动3像素间距BUG

有时候,图片浮动后,文字环绕着有个3像素的距离。
解决方法:
_margin-right:-3px;

1.1.7  IE6下li里底部3像素间距BUG

如果li里面内容过于复杂,那么li和li之间就出现3像素白空隙。  很困扰哦

解决方法:

vertical-align: middle  bottom等

1.1.8  IE6中奇数宽高的BUG

我们尽量把盒子的高度和宽度设为偶数(定位的影响)

1.1.9了解ie6盒子会撑高的特性

内容有多大,盒子就撑多大
其他浏览器也像ie6这样:height:auto!important; 高度自适应
!important  为了提权  在所有里面它的权重最高。
ie7及其以上的ie版本  还有非ie浏览器都能识别。

ie6下常见的bug 调整页面兼容性

时间: 2024-10-23 13:36:30

ie6下常见的bug 调整页面兼容性的相关文章

CSS在IE6下的一些BUG和兼容性问题

在IE6,7下面PNG图片问题: 在IE6下,不支持PNG透明图片,解决办法是:在HTML里加上以下一段代码,其中DD_belatedPNG_0.0.8a.js文件可以在百度上找到,DD_belatedPNG_0.0.8a.js是国外一个大神写的JS文件. <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix

CSS中IE6下双边距BUG解决方案

其实这个问题在刚学习CSS的时候就知道怎样解决了,但是一直不知道为什么会出现这种现象,今天顺便记录一下. 1.为什么会出现双边距BUG? <style type="text/css"> body,div{padding: 0;margin: 0;} .box{border: 10px solid black;float: left;} .inner{width: 100px;height: 100px;background: red;float: left;margin:

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

常见浏览器bug(针对IE6及更低版本)及其修复方法

常见bug及其修复方法有以下几种 1.双外边距浮动bug 双外边距浮动bug在IE6及更低版本中常见.所谓双外边距浮动bug是指使任何浮动元素上的外边距加倍.(见下图) 只要将元素的display属性设置成inline就行了.因为元素时浮动的,所以将display属性设置为inline实际上不会影响显示方式.但是,这似乎会阻止Windows上的IE6及更低版本将所有外边距加倍.所以每当对具有水平外边距的元素浮动时,都应该很自然的将display属性设置为inline,以备外边距将来被加大. 2.

常见ie6的浏览器兼容bug

1.文字本身的大小不兼容 同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的, ie下实际占高16px,下留白3px ff 下实际占高17px,上留白1px,下留白3px opera下就更不一样了 解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值. 2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大, 而ie6下是会被内容撑大,高度限定失效,ie7,8,9都不会撑大. 所以不要

IE6下的bug

一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG 二.IE6中3像素问题及解决办法 当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙.诡异的是如果右侧的容器没设置高度时3px的间

ie6常见css bug

相信每个前端人都会有同感——ie6这东西真是万恶啊!就连ms也大力鼓励消费者淘汰ie6,不过很不幸,大概是因为xp绑定了ie6,因此在国内ie6的市场占有率仍高达42.43%,这是今年2月份的数据.也正因ie6的高占有率,因此在网站开发时也不得不考虑兼容ie6,就算不做到完美兼容,来个基本兼容也是必须的,起码不要让你的网站在ie6中乱套了.今天就跟大家分享一些平时积累的ie6 bug解决方法. IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧mar

IE6下兼容问题(转载)

()1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本. <![endif]--> <!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6). <![endif]--> <!--[if IE 5.5]> 这段文字仅显示在 IE5.5. &

IE6、IE7、IE8、火狐兼容性问题

浏览器不兼容 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高度上我们不能容忍1px 的差异. 2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑