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

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

　　

　　好了，废话不说了，众所周知，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（汇总）

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  2. 使用cnblogs发布第一篇文章，HelloWorld

    HelloWorld! 瞅瞅源码的样式,嗯,语法高亮还是可以的,辨识度还是挺高的. <!DOCTYPE html> <html> <head> <meta c ...

  3. ios 第一篇文章－xcode6.2键盘调不出来

    ios 第一篇文章 不晓得有没有人遇到过ios代码内调用键盘(keyboard)调不出来的情况,反正我是遇到了,按官方文档的说法调用键盘事件非常easy事实上: 我用了之后,不晓得为嘛,键盘就是不显示 ...

  4. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  5. wordpress如何添加自增变量(第一篇文章显示摘要后面的只显示标题)

    有时我们在调用文章列表的时候需要在前面添加序号看起来比较整齐,如何实现呢?要想精确的控制每篇文章,我们先在循环前定义一个变量 $ashu_i=1 来计数,变量名随便,然后每循环一次,$ashu_i加1 ...

  6. 3.新手建站教程系列之认识WordPress和第一篇文章

    上一期咱已经把本地环境和wp网站给搭建出来了,接下来就是来认识这个程序了.进入网站后台,地址为你的网址/wp-admin 后台名字叫做仪表盘,首页是一个信息合集区域,上面会显示有多少文章,多少页面以及 ...

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

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

  8. 第一篇文章 vim的使用

    这么长时间以来,一直没有在博客园上写过博文.那第一篇博文就以vim的使用为开端吧. 不知道有多少人还在用着ctrl+c,ctrl+v这种方式,不过,就我个人而言,还是很倾向于vim的.不管是在服务器上 ...

  9. .net core番外第一篇：Autofac的几种常见注入方式、生命周期和AOP

    使用Autofac进行服务注册实践: 新建三个项目,分别是webapi项目 Wesky.Core.Autofac以及两个类库项目 Wesky.Core.Interface和Wesky.Core.Ser ...

随机推荐

  1. 基于ip san的iscsi操作执行过程

    SAN它是storage area network(存储区域网络)速记,早期san光纤通道技术被用于.当迟到iscsi协议后出现,为了在这两者之间区分.它分IP SAN和FC SAN.FC SAN由于 ...

  2. MyEclipse优化全攻略

    (0) 吐槽 Eclipse仅仅是个半成品有木有?什么都须要自己安装插件,新手非常难用有木有? 安装上插件以后了版本号兼容和各种问题烦死人有木有? 都怪碎片和版本号乱公布有木有? IntelliJ I ...

  3. Webserver管理系列：3、Windows Update

    微软的操作系统可以使用用户过程中发现了一些漏洞,因此,他们经常发布一些系统补丁.因此,我们需要自己主动安装更新功能后,打开系统. 默认的更新功能未开启自己主动: 开启自己主动更新功能后.Windows ...

  4. Windows系统下Redis的安装

    Redis是一个用的比较广泛的Key/Value的内存数据库,新浪微博.Github.StackOverflow 等大型应用中都用其作为缓存,Redis的官网为http://redis.io/. 最近 ...

  5. JavaScript Date对象介绍

    原文:JavaScript Date对象介绍 Date 日期和时间对象 1. 介绍 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new ...

  6. The Swift Programming Language-官方教程精译Swift（9） 枚举-- --Enumerations

    枚举定义了一个通用类型的一组相关的值,使你可以在你的代码中以一个安全的方式来使用这些值.   如果你熟悉 C 语言,你就会知道,在 C 语言中枚举指定相关名称为一组整型值.Swift 中的枚举更加灵活 ...

  7. 程序员面试必备经典CTCI，谷歌面试官经典作品！

    1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...

  8. 关于SQL Server 2005 的自动远程数据库备份

    原文:(原创)关于SQL Server 2005 的自动远程数据库备份 由于项目需要,需要对目标服务器上的数据库每天进行备份并转移,查阅网上的一些帮助,结合自己的实际需要,写了这篇文章,希望对有同样需 ...

  9. APP-随身听

    简单到复杂听你的专属音响界,听金融.听物业,听新闻和其他节目专辑,简要介绍了新的音频应用,给你不一样的聆听体验.还记得老歌做?这里有.您留声机的一部分!很简单的音频应用,随时随地与此应用程序来听你的私 ...

  10. lua迭代器和仿制药for

    不管是什么样的结构,你只需要同意遍历集合可以称为迭代器的所有元素.lua常用来形容叙事功能迭代器.个元素.每个迭代器都须要保存一些状态来知道当前处于什么位置和怎样进行下一次迭代. 对于这种任务.闭包提 ...