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

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

　　

　　好了，废话不说了，众所周知，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. Android真正简单的教程-第十二枪（ViewFlipper实现滑动效果）

    直接看代码 1.MainActivity.java: package org.yayun.demo; import android.app.Activity; import android.os.Bu ...

  2. 【高德地图API】如何获得行政区域？如何制作行政规划图？

    原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap ...

  3. CSharp设计模式读书笔记（15）：命令模式(学习难度：★★★☆☆，使用频率：★★★★☆)

    命令模式(Command Pattern):将一个请求封装为一个对象,从而让我们可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是一种对象行为型模式,其别名为 ...

  4. 基于Hama并联平台Finding a Maximal Independent Set 设计与实现算法

    笔者:白松 NPU学生. 转载请注明出处:http://blog.csdn.net/xin_jmail/article/details/32101483. 本文參加了2014年CSDN博文大赛,假设您 ...

  5. 只显示年月的js时间控件 纯手写

    <style> #date { text-align: center; } .td { cursor: pointer; } </style> <script> f ...

  6. C--控制语句循环例子

    C的三种循环while.for和do  while 先说一下scanf()函数的返回值问题 当scanf("%d,%d",&a,&b);如果用户正确输入了俩个整形变 ...

  7. Cocos2d-x学习笔记（14）（更新函数scheduleUpdate、进度计时器CCProgressTo、滚动视图CCScrollView）

    一.scheduleUpdate 1.scheduleUpdate:此函数是CCNode的函数,每一个CCNode仅仅要调用scheduleUpdate更新函数,那么这个CCNode就会响应当前类的u ...

  8. Python学习笔记：概要

    1.print不同的互动解释语句输出和输出 在以下示例,我们分配字符串值到可变myString.先用print 要显示一个变量的内容, 其次是变量名,以显示. >>> myStrin ...

  9. 浅谈javascript性能-管理内存

    上次说到,javascript脚本到底应该放在哪里?用什么用处? 以下2点: 在Html.Body部分中的JS会在页面加载的时候执行.即-用户触发一个事件的时候执行的脚本.eg:onload事件... ...

  10. web设计师和前端设计师的互动—前端工程师应该具备的三种思维

    如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...