我的第一篇文章 —— 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,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，这里的字数在中文或英文数字时都成立。当溢出的文字字数大于文本的字数时，文字区块将会消失。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
发生场合：当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声明。
解决方法：可以给为input加上宽度
原理分析：IE8浏览器Bug。
IE8百分比padding垂直margin bug：
解决方法：给父元素加一个overflow:hidden/auto。
原理分析：IE8浏览器Bug。
我的第一篇文章 —— IE6的那些css常见bug（汇总）的更多相关文章
- IE6的那些css常见bug（汇总）
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
- 使用cnblogs发布第一篇文章，HelloWorld
HelloWorld! 瞅瞅源码的样式,嗯,语法高亮还是可以的,辨识度还是挺高的. <!DOCTYPE html> <html> <head> <meta c ...
- ios 第一篇文章－xcode6.2键盘调不出来
ios 第一篇文章 不晓得有没有人遇到过ios代码内调用键盘(keyboard)调不出来的情况,反正我是遇到了,按官方文档的说法调用键盘事件非常easy事实上: 我用了之后,不晓得为嘛,键盘就是不显示 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- wordpress如何添加自增变量(第一篇文章显示摘要后面的只显示标题)
有时我们在调用文章列表的时候需要在前面添加序号看起来比较整齐,如何实现呢?要想精确的控制每篇文章,我们先在循环前定义一个变量 $ashu_i=1 来计数,变量名随便,然后每循环一次,$ashu_i加1 ...
- 3.新手建站教程系列之认识WordPress和第一篇文章
上一期咱已经把本地环境和wp网站给搭建出来了,接下来就是来认识这个程序了.进入网站后台,地址为你的网址/wp-admin 后台名字叫做仪表盘,首页是一个信息合集区域,上面会显示有多少文章,多少页面以及 ...
- IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
- 第一篇文章 vim的使用
这么长时间以来,一直没有在博客园上写过博文.那第一篇博文就以vim的使用为开端吧. 不知道有多少人还在用着ctrl+c,ctrl+v这种方式,不过,就我个人而言,还是很倾向于vim的.不管是在服务器上 ...
- .net core番外第一篇：Autofac的几种常见注入方式、生命周期和AOP
使用Autofac进行服务注册实践: 新建三个项目,分别是webapi项目 Wesky.Core.Autofac以及两个类库项目 Wesky.Core.Interface和Wesky.Core.Ser ...
随机推荐
- 刚刚回归的开始菜单 Windows 10全面体验
北京时间2014年10月1日凌晨,微软就在旧金山召开新品公布会,对外展示了自己新一代操作系统Windows 10,覆盖了包含手机.平板.台式机以及Xbox One在内的全部平台.尽管微软此次公布的不过 ...
- 计算4000000000内的最大f(n)=n值---字符串的问题python实现（五岁以下儿童）
问题: 写一个函数,计算4 000 000 000 以内的最大的那个f(n)=n的值,函数f的功能是统计全部0到n之间全部含有数字1的数字和.比方:f(13)= 6,由于"1"在& ...
- javascript系列之核心知识点(二)
变量对象 变量对象是一个与执行上下文相关联的容器.它是一个和上下文密切结合的特殊对象,含有定义在上下文中的变量和函数声明.注意,函数表达式(和函数声明不同的)不包含在变量对象中. 变量对象 ...
- hdu 4864 Task（贪婪啊）
主题链接:pid=4864">http://acm.hdu.edu.cn/showproblem.php?pid=4864 Task Time Limit: 4000/2000 MS ...
- ArcEngine载入中SDE问题栅格数据
当直接加载矢量数据到IFeatureWorkspace接口可,但是,在装载门格当要传送的数据IRasterWorkspaceEx接口. 效果如下面的,对可以被添加到双击Globe在. watermar ...
- Oracle分区表转换
Oracle普通表—>分区表转换(9亿数据量) 背景介绍: 环境:Linux 5.5 + Oracle 10.2.0.4 某普通表T,由于前期设计不当没有分区,如今几年来的数据量已达9亿+, 空 ...
- js 正则之 判断密码类型
原文:js 正则之 判断密码类型 今天没啥写的,就分享个思路吧.之前在群里讨论的时候,谢亮兄弟说判断密码是否是纯数字,纯字母之类的.如果用 , 条判断,那就老长一大段了.这个思路是我之前看 jQuer ...
- javascript1
<script> //初始化表达式:通过方括号定义数组元素和通过花括号定义对象属性名和属性值之间的映射关系的语法 //通过“.”和“[]”来引用对象属性或数组元素的值就构成一个表达式. v ...
- C语言与sqlserver数据库
原文:C语言与sqlserver数据库 1.使用C语言来操作SQL SERVER数据库,采用ODBC开放式数据库连接进行数据的添加,修改,删除,查询等操作. step1:启动SQLSERVER服务,例 ...
- oracle 非数字型转数字型
原文:oracle 非数字型转数字型 oracle中如果一个字段内容不全是数字型 可以通过以下方式过滤 to_number(substr(translate(a.vital_signs_cvalues ...