1.IE6双倍边距bug

当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。

2.3像素问题及解决办法

当浮动元素与非浮动元素相邻(注意这里的相邻可以是纵向的也可以是横向的)时,这个3像素的Bug就会出现,它会偏移3像素。实际表现就是两个元素之间产生了一道缝隙!解决方法很简单,将两个元素都浮动就OK了。此BUG深层的原因是非浮动元素的layout未触发,所以这里只要是能够触发layout的css都可以解决问题。

3.当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>中,这样应该可以通过验证了。

4.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

5.IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

6.IE6文字溢出BUG
在我写本文之前,我遇到了这个bug。它相当的古怪和滑稽。一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面。(译注:也可以参看Explorer 6 Duplicate Characters Bug获得bug演示)。我无法解决它,所以我搜索它,果然,这是另一个IE6的bug。
对此有许多解决方法,但是没有一个对我的例子有效(因为网站的复杂性我无法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起来能解决这个问题。
但是,从Hippy Tech Blog那里了解到,问题背后的原因是由于html注释标签。IE6不能正确的渲染它。下面是他建议的解决方案列表:
1.使用<!—[IF !IE]>标签包围注释
2.移除注释
3.在前浮动上增加样式 {display:inline;}
4.在适当的浮动的div上使用负边距
5.在原文本增加额外的&nbsp;(比如10个空格) (hacky way)

7.一个空格引发CSS失效
这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font- size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符"-"。IE有个BUG,在处理伪类时,如果伪 类的名称中带有连字符"-",伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。

8.IE6中奇数宽高的BUG
IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。

9.IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零,font-size:0

10.ie6下空标签高度问题
一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
.c{height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种:
1.css里面加上overflow:hidden;
2.div里面加上注释, 
<div class="c"><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div class="c">&nbsp;</div>(#换成&)

11.修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释,比如:
<!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

12.IE6,7失效的margin-left/right bug

HTML代码:

1<div class="wrap">
2<div class="cont">www.hemin.cn</div>
3 </div>

CSS代码:

1.wrap{background:#eee;border:1px solid #ccc;}
2.cont{border-bottom:2px solid #aaa;margin:0 100px;height:30px;}


解决方法:触发.warp的layout就可以了。具体的比如:给.warp加上zoom:1或者width等等。

13. 相对位置和溢出隐藏(Position Relative and Overflow Hidden)
这个问题我遇到过很多次,当时我正在准备一个JQuery的教程,因为我使用了很多overflow hidden来达到我想要的布局。
问题发生在当父元素的overflow被设置成hidden并且子元素被设置成position:relative。
CSS-Trick有一个很好的例子来演示这个bug。position:relative and overflow in internet explorer
解决方法
为父元素增加position:relative;

14. IE的最小高度(Min-Height for IE)
这很简单,IE忽略min-height属性。你可以用下面的hack来修复它。感谢Dustin Diaz
这个解决方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。
解决方法

1selector {
2min-height:500px;
3height:auto !important;
4height:500px;
5 }
 
15.PNG透明(PNG Transparency)
 
 
16. IFrame透明背景 (IFrame Transparent Background)
在firefox和safari里你应该不会遇到这个问题因为默认情况下,iframe的背景被设置为transparent,但是在IE里,却不是如此。你需要用到allowTransparency 属性并且加入下面的CSS代码来达成目的。
解决方法

/*in the iframe element */
<iframe src="content.html" allowTransparency="true">  
</iframe>

/*in the iframe docuement, in this case content.html */
body {

}


17. 禁用IE默认的垂直滚动条(Disabled IE default Vertical Scroll bar)
默认情况下,即使内容适合窗口大小,IE(译注:IE6/7)也会显示垂直滚动条。你可以使用overflow:auto,让滚动条只在你需要时出现。

 
 
18. 盒模型Hack(Box Hack Model)
这是IE里最热门的bug了。基本的理解是,IE计算宽度(width)的方式不同。基于w3c标准,一个元素总宽度应该是
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是,IE计算宽度时没有加上填充和边框:
总宽度 = margin-left + width + margin-right
更多的细节,请参考这个链接:Internet Explorer和CSS盒模型详细解释
解决方法
使用w3c的标准兼容模式。IE6或者之后的版本能基于w3c的标准计算,但是你仍旧会在IE5中遇到问题。
或者你可以用CSS Hack来解决这个问题。所有标准兼容的浏览器都能读取w\\idth:180px 除了IE5。

#content {
padding:10px;
border:1px solid;
width:200px;
w\\idth:180px;
}

IE6 BUG 汇总的更多相关文章

  1. ie7,8常见bug,共计257个bug汇总?如何解决ie的历史bug

    ie7.8常见bug,共计257个bug汇总 针对web开发者来说,浏览器的bug,特备是ie的bug是很多人的噩梦,因为ie的更新换代没有ff,chrome,safari,opera那么快,而且ie ...

  2. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

  3. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  4. 写出几种IE6 BUG的解决方法

    1.双边距BUG float引起的  使用display:inline 2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px   3.超链接hover 点击后失效 ...

  5. input border IE6 bug

    border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异. 1.性能差异[border:0;]把border设为“0”像素虽然在页面上看不见,但按bor ...

  6. IE兼容性bug汇总

    1.IE6的双边距BUG. 发生条件:如果有元素是浮动元素,则该元素与它的父元素(一般是一个容器)直接相接触(中间不能隔着其他元素)的左或右的边距就会产生双倍边距,也意味着相邻的兄弟元素不可能会产生双 ...

  7. 前端布局常见IE6 bug的解决方法,清除浮动的几种方法以及各自的优缺点

    相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...

  8. IE兼容BUG汇总及解决方案(持续更新)

    本篇为总结开发过程当中遇到的各种IE兼容性的小问题,比较复杂的会单开一篇文章来讲解. 另:我手头目前只有原生IE8,原生IE9,原生IE11,以及IE11模拟的IE5,7,8,9,10.因IE6太过古 ...

  9. IE6&#160;BUG及解决方案

    1.IE6中奇数宽高的BUG 一个外部的相对定位div,内部一个绝对定位的div(right:0) 可是在IE6下查看,却变成了right:1px的效果了: 解决方案就是将外部相对定位的div宽度改成 ...

随机推荐

  1. 模拟ajax的同异步

    今天突然想到那只在app中,如果请求数据时用的是app提供的接口,如果该接口没有同异步的话,怎么办. 所以就捣腾了下. 模拟ajax同异步. var VshopDataApi = { queryArr ...

  2. iOS开发多线程篇—NSOperation基本操作

    iOS开发多线程篇—NSOperation基本操作 一.并发数 (1)并发数:同时执⾏行的任务数.比如,同时开3个线程执行3个任务,并发数就是3 (2)最大并发数:同一时间最多只能执行的任务的个数. ...

  3. Arduino智能小车制作报告

    Arduino智能小车制作报告 制作成员:20135224陈实  20135208贺邦  20135207王国伊 前提: Arduino,是一个开源的单板机控制器,采用了基于开放源代码的软硬件平台,构 ...

  4. winform中的Dock属性问题

    经过测试发现,winform中的Dock属性,先添加的控件,比后添加的控件的Dock权重要高.系统会优先显示先添加控件的Dock属性,再显示后添加的Dock属性. ------------------ ...

  5. iOS依据字符串计算UITextView高度

    iOS计算字符串高度,有须要的朋友能够參考下. 方法一:ios7.0之前适用 /** @method 获取指定宽度width,字体大小fontSize,字符串value的高度 @param value ...

  6. 深度学习——卷积神经网络 的经典网络(LeNet-5、AlexNet、ZFNet、VGG-16、GoogLeNet、ResNet)

    一.CNN卷积神经网络的经典网络综述 下面图片参照博客:http://blog.csdn.net/cyh_24/article/details/51440344 二.LeNet-5网络 输入尺寸:32 ...

  7. openlayers4 入门开发系列之地图导航控件篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. 2018-2019-2 网络对抗技术 20165335 Exp3 免杀原理与实践

    一.免杀原理与基础知识: (1)杀软是如何检测出恶意代码的? 检测特征码:特征码就是一般程序都不会有的代码,而后门有的那种特别的数据,而一个程序,应用有这种代码,数据的话,就直接判定为恶意代码. 主流 ...

  9. HDU 6375(双端队列 ~)

    题意是有至多150000个双端队列,400000次简单操作,直接开会导致内存超限,所以用 STL 中的 map 和 deque ,而读入过大已经在题目中有所说明,直接用已经给出的快速读入即可.要注意的 ...

  10. Luogu P4427 [BJOI2018]求和

    这是一道巨狗题,我已无力吐槽为什么我怎么写都不过 我们对于这种无修改的边权题目有一个经典的树上差分套路: \(ans=sum_x+sum_y-2\cdot sum_{LCA(x,y)}\) 这里的\( ...