IE6去掉3PX间隔BUG

Wesley13
• 阅读 661

1.改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
——此解决方案的评论:疯了!因噎废食的做法。
2.减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。
3.去掉所有的注释。
——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。
4.修正注释的写法。将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
——此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!–[if !IE]>这里是注释内容[endif]–>这种注释写法很欣赏。
5.在第二个容器后面加一个或者多个

来解决。
——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。影响网页效率

这五种方法我都不推荐,根据我的实验最直接的解决问题的方法是在父容器A添加 margin-right:-3px; 一般情况下都可以解决这个问题。

我是6爷,我没醉

晚上开着三个浏览器(IE6、IE7、FF)写DIV+CSS时,发现在 IE 6 中 ,DIV 使用背景图片(或直接插入图片在DIV中)的时候,在图片的下端会出现一条空白间隔,经测量,刚好是 3px !没见过这种 3px 问题,用 display: inline 和 -3px 等方法也搞不定,于google之,最终在蓝色理想找到答案,原因是:

IE6默认字号是12pt,默认行高是normal。

找到原因就好解决了,给DIV加上:font-size: 0px;

搞定。(看来自己要学习的东西还很多啊!)

顺便转一下IE6的某些恼人bug,以供参考。

微软的IE系列浏览器用的人是最多的,但对CSS的解释还是存在不少BUG,IE6 的BUG就很明显,IE7中仍然是有部分IE6残留的BUG影子。火狐与Opera的更新速度很快,现在最新的火狐与Opera已经在对CSS的解释能力 上超越了IE。不过IE8就快出来了,到时候微软的新作品应该不会是现在这个样子了,能够很好地兼容CSS,应该能挽回些被火狐和Opera挖去的部分用 户。IE6去掉3PX间隔BUG

闲话少说,这几天努力钻研CSS,光我理解CSS还不够,还要让IE6、7、火狐、Opera下都过一遍才行,让它们都能够正确显示出来才对。其实软件园没有用到高级的DIV架构,但最普通的架构也能见出IE里出现的BUG。

举一些BUG及解决方案吧:

IE6双倍浮动BUG及解决办法

比如

#div1 {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}

左margin边界设定为了10px,然后IE6却偏偏给你显示成双倍的20px,解决办法是加上display:inline;

ie6/7由注释引起的文字错位:

多了一只IE6猪
↓这就是多出来的那只IE6猪

这是个经典的例子。IE6在使用一大堆注释放在包含在同一个DIV的不同元素之时就会这样,重复一些文字在文字的顶或底部。

我在ASP生成HTML的循环语句中使用了一段注释,结果在IE7下显示整个DIV顶部像空了一截,底部正常,而IE6则顶部空一截,底部还有重影文字,就像上面多出现的猪一样。
解决方法是:去掉注释或者注释不要放置于2个浮动的区块之间。

IE6的著名3px BUG(断头台bug):

52css.com
oyksoft.com

两个层,一个浮动,一个不浮动,把浮动的一个放在不浮动层中,你会发现两个之间有点间隙,宽度为3px。这个问题是最让人头疼的问题了。

解决方法:

1、所有的层都浮动 把右边那个层也设置成浮动层就可以消除这可恶的3px间隔
2、给左边的层,应用margin-right:-3px;,同样可解决IE 3px bug。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小嫌 小嫌
2年前
css中块状元素和内联元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。块状元素块状元素特点1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。常用的块状元素有:、
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Peter20 Peter20
3年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
1. 容器化部署一套云服务 第一讲 Jenkins(Docker + Jenkins + Yii2 + 云服务器))
容器化部署一套云服务系列1\.容器化部署一套云服务之Jenkins(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fjackson0714%2Fp%2Fdeploy1.html)一、购买服务器服务器!caeef00
Wesley13 Wesley13
2年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Wesley13 Wesley13
2年前
CSS复习笔记二:浮动和清除浮动
 一、浮动的性质1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。2、浮动的元素相互贴靠3、浮动的元素有“文字环绕”效果       含有图片的div浮动,段落不浮动,文字会环绕图片。4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。浮动(脱标)的元素是不能把容器惩处高度的。二、浮动的清除