IE6的那些css常见bug（汇总）

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

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

　　

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

　　

　　1. IE6的3像素BUG产生条件及解决方法

　　

　　

<!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。

IE6的那些css常见bug（汇总）的更多相关文章

  1. 我的第一篇文章 —— IE6的那些css常见bug（汇总）

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

  2. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  3. CSS常见BUG

    CSS Hack IE条件注释: 所有IE:<!--[if IE]> css code <![endif]--> IE6以上:<!--[if gt IE 6]> c ...

  4. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  5. IE6下css常见bug处理

    1.双倍边距 如下图所示,一个样式里面既设定了“float:left:”又有“margin-left:100px:”的情况,就呈现了双倍情况.如外边距设置为100px, 而左侧则呈现出200px,解决 ...

  6. 移动端常见bug汇总001

    点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景. A:根本原因是-webkit-tap-highlight-color,这个属性 ...

  7. web开发常见bug汇总

    1.在做使用struts2进行文件上传时总是出现 java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOu ...

  8. IE6常见bug整理

    By Diaoyude  | 发布时间: 09-08 09:47  | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...

  9. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

随机推荐

  1. Linux下javaweb

    Linux下javaweb环境搭建 步骤: 1.使用远程工具连接上服务器,例如xsheel(ssh).filezilla(ftp) 2.JDK安装及相关配置 3.Mysql安装及相关配置 4.Tomc ...

  2. easyui datagrid load 封装 参数问题 js 作用域

    var temp = { LoginAccount: $('#LoginAccount').val(), ShopName: $('#ShopName').val() }; function doSe ...

  3. 兔子--gradle安装和配置

    1.下载gradle,下载--all的这个 点击进入下载页 2.下载下来后,解压.配置环境变量. 编辑path , ....;G:\soft\gradle-2.2.1-all\gradle-2.2.1 ...

  4. Objective-c中的单例

    单例是指静态分配的实例,就是只开辟一块内存,不会重新开辟内存,而 iphone sdk 中全是这种实例,例如[UIApplication sharedApplication] 返回一个指向代表应用程序 ...

  5. 分析Cocos2d-x横版ACT手游源 2、server场景

    仍然一样 直接在代码 资源 下一个 上传 你可以看到自己 NFServerChangeLayer.h </pre><pre name="code" class=& ...

  6. [Unity3D]Unity3D游戏开发之刀光剑影特效的实现

    大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 我实在不明确有的人为什么不喜欢武侠/仙侠类游戏,也许是因为武侠/仙侠类游戏身上被永远烙上的国 ...

  7. webkit的几个属性

    -webkit-text-size-adjust 1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-s ...

  8. .net下二进制序列化的格式分析[转]

    .net下二进制序列化的格式分析[转] -- 综合应用 (http://www.Host01.Com/article/Net/00020003/) --- .net下二进制序列化的格式分析 (http ...

  9. 华硕K55DR体验 - 显卡就是坑

    朋友拿来电脑,本来他室友已经把他电脑重做完了,但还是卡,非要给我再搞一遍,难道?我就是传说中的大神?咳咳...YY一下,适可而止 华硕K55DR的配置来看,似乎应付CF没什么问题,可是,FPS各种不稳 ...

  10. C++在struct与class差异

    在C++中,既能够用structkeyword进行类的定义,也能够用classkeyword进行类的定义,那么这两者究竟有什么差别呢? 唯一的一点差别是:struct和class的默认訪问权限不一样. ...