IE6的那些css常见bug(汇总)

时间:2022-12-02 04:00:28

IE6的那些css常见bug(汇总)

我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建。这几天 我做了这个决定 把我的博客建起来 每周发一些看到的,听到了一些前端知识或者前沿技术。

  另外说一句,我是一个前端小白 所以高手就忽略我吧 免得说我班门弄斧 我只是想写点或记录点东西 可能还会帮助一些比我更加新的新手 共同成长 ^_^!

  

  好了,废话不说了,众所周知,IE6…………(对不起 先让我恶心下....) 随着高级浏览器的风靡 不仅是前端开发人员 就连他的父母“大微软”也恨不得他早点灭亡 但这并不是ie6的责任 这是时代发展的必然结果 我相信 在前端摸爬滚打的很多前辈们 肯定对ie6有着感情。据说ie6在明年中上旬就正式推出历史舞台了 很多大型网站已经宣布不再兼容IE6 另外ie6在美国的占有率已经不足1% 但是在中国ie的占有率还是很高的 个人认为ie6不会这么快就消失 因为在中国绝大多数人都在用盗版microsoft 只要用他能上一些他们经常上的网站,比如baidu,taobao等(上这些网站时报错不算!) 那么人们就不会花时间再下一个新的。所以如果你想做前端css 就必须了解他的一些常见bug。

  

  1. IE6的3像素BU*生条件及解决方法

  

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE6的3像素bug </title>

<style type="text/css">

#sideBar{

width:100px;

height:100px;

background:#6bee68;

float:left;

}

#content{

width:200px;

height:100px;

background:#56bcf3;

}

</style>

</head>

<body>

<div id="sideBar">sideBar</div>

<div id="content">content</div>

</body>

</html>

 

  解决方法:只需要给content加上浮动,就OK了

  2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如:

<#div id=”imfloat”>

相应的css为

#imfloat{ float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

  3.IE6文字溢出bug(不常见)

[html]<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
< title>IE6文字溢出bug</title>
< /head>
< body>
< div style="width:400px">
< divstyle="float:left"></div>
< !-- -->
<divstyle="float:right;width:400px">↓这就是多出来的那个字</div>
< /div>
< /body>
< /html>[/html]

IE6的BUG

经测试,只有IE6中有文字溢出bug,ie7 8火狐正常。在ie6会显示 ’↓这就是多出来的那个字字’,多出了一个字

与浮动有关

去除 <divstyle=”float:left”></div>中的“float:left;”,你会发现多出来的“字”字不见了,页面正常显示。同样去除 <divstyle=”float:right;width:400px”>中的“float:right;”,多余的“字”字也同样消失,页面正常显示。

与注释“<---->”的位置有关

将注释转移到 <divstyle=”float:left”></div>前面,多余的“”字消失,页面正常显示。将注释转移到 <divstyle=”float:right;width:400px”> ↓这就是多出来的那个字</div>下面,多余的“字”字也同样消失,页面正常显示。

与固定宽度有关

去除 <divstyle=”float:right;width:400px”>中的“width:400px”,多余的“字”字消失,页面正常显示。

溢出字数与注释条数有关

增加注释的条数:当1条注释时,则多出来 1 个字;2 条注释时,则多出来 3 个字;3条注释时,则多出来 5 个字……我们会从上面的规律中得到这样一个公式:溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。当溢出的文字字数大于文本的字数时,文字区块将会消失。

解决方法:
a.不放置注释。最简单、最快捷的解决方法
b.注释不要放置于 2 个浮动的区块之间
c.将文字区块包含在新的 之间,如:<divstyle=”float:right;width:400px”><div>↓这就是多出来的那个字 </div></div>
d.去除文字区块的固定宽度,与 3 有相似之处
 
 
 
  4.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
 
 
 
  5.页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类,然后CSS这样设计:

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}


第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

 
 
另外还有一些不常见的,简单说明下:
 
 
  IE6/7下ul/ol标记消失bug:
发生场合:当ul/ol触发了haslayout并且是在ul/ol上写margin-left,前面默认的ul/ol标记会消失。
解决方法:给li设置margin-left,而不是给ul/ol设置margin-left。
原理分析:IE6/7浏览器Bug
 

  IE6/7下margin与absolute元素重叠bug:

发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。
原理分析:这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。
 
 

  IE6/7/8下auto margin居中bug:

发生场合:给block元素设置margin auto无法居中
解决方法:出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决,但根据本人亲测,加with此种方法是无效的,如果没有Doctype即使给元素添加width也无法让block元素居中。
原理分析:缺少Doctype声明。

 
 
  IE8下input[button | submit] 设置margin:auto无法居中
 
发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法:可以给为input加上宽度
原理分析:IE8浏览器Bug。
 
 

  IE8百分比padding垂直margin bug:
 
发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。
解决方法:给父元素加一个overflow:hidden/auto。
原理分析:IE8浏览器Bug。