当我们想让一段文字出现在一个布局块的右边的时候，我们会让布局块向左浮动，然后把段落设置左布局块宽度大小的左空白。比如左布局块是.a{float:left;height: 110px;width: 286px;}，我们就设置p{margin-left: 286px;border: 1px solid #000;}，其中背景颜色和边框都是测试用的，不是必要的样式设置。在Firefox下可能没问题，但在IE下，你会发现布局块右边的段落离左边框有3px的空白，这就是一个bug。如图1

　　为了解决这个bug，我们首先用* html p{height: 1%;}来针对IE下的段落进行样式覆盖，因为IE的html元素有个匿名的父元素，所以用* html加你要选择的选择器就可以专门针对IE来设置一些样式了。IE有布局的概念，默认只有table等元素才会拥有布局，p等标签是没有拥有布局的，但是如果给p标签设置了heigh，那么p标签就拥有布局了，这样以来，布局块右边的段落文字离自己的左边框就没有3px的空白了。因为现在p拥有了布局，它就会被限制为一个矩形，这时候它会自动出现在左布局块的右边，这时候我们要覆盖以前为段落设置的286像素的左空白，我们最终要设置* html p{height: 1%;margin-left:0;}但是很快你就会发现布局块右边的段落的左边框离布局块有3px的空白，这个空白是左边的布局块的空白，这又是一个bug，如图2

　　为了解决这个bug，我们需要给左浮动布局块设置负值的右空白，增加样式* html .a{margin-right: -3px;}，这样如果左浮动布局块不是图片的话已经完美解决了。如果左边的浮动有图片的话，IE的不同版本的处理不一样，windows下的ie5.x对会给图片的左右两边都增加3px的空白，而ie6不对图片增加额外的空白，所以经过上面的样式设置后，ie6下的段落会向左错位3px，如图3。这就一连串bug了，往往开发程序就是这样，修复了旧bug，引入了新bug。

　　为了解决上面的bug，我们还要用到一个技巧来为ie5和ie6单独的设置图片的左浮动样式，这里要用到一个ie5转义字符的bug。完整的样式是这样的：* html img.a{margin: 0 -3px;ma\rgin:0;}，首先我们用* html img.a来选取所有IE浏览器下的带有a类的img元素，然后我们先用margin:0 -3px;设置上下空白为0，左右空白均为-3像素，这个主要是针对ie5(windows)的，因为ie5对浮动图片左右都添加不必要的3px空白。然后紧接着用ma\rgin:0;来覆盖上面的设置，因为IE5下不会忽略转移字符，所以它不认识这个样式设置，直接就忽略了，而IE6认识，就覆盖了上面一句的样式设置，左右空白为0了。

　　最后一步，为了让FF和IE下显示一直，我们吧最初在p元素上设置的margin-left:286px;去掉，因为不去掉的话，所有的段落还是都向左右286像素的左空白，而IE下因为重写了样式而没有这些空白。最终我们解决了所有的问题。如图。

完整的代码如下

<!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>

<title>ie 3px像素问题解决</title>

<style>

.a {

float: left;

height: 110px;

width: 286px;

background-color: Blue;

}

p  {

border: 1px solid #000;

}

* html p {

height: 1%;

margin-left:0;

}

* html .a {

margin-right: -3px;

}

* html img.a {

margin: 0 -3px;

ma\rgin:0;

}

</style>

</head>

<body>

<p> 当我们想让一段文字出现在一个布局块的右边的时候，我们会让布局块向左浮动，然后把段落设置左布局块宽度大小的左空白。比如左布局块是.a{float:left;height:

110px;width: 286px;}，我们就设置p{margin-left: 286px;border: 1px

solid #000;}，其中背景颜色和边框都是测试用的，不是必要的样式设置。在Firefox下可能没问题，但在IE下，你会发现布局块右边的段落离左边框有px的空白，这就是一个bug。如图</p>

<p> 为了解决这个bug，我们首先用* html p{height: 1%;}来针对IE下的段落进行样式覆盖，因为IE的html元素有个匿名的父元素，所以用* html加你要选择的选择器就可以专门针对IE来设置一些样式了。IE有布局的概念，默认只有table等元素才会拥有布局，p等标签是没有拥有布局的，但是如果给p标签设置了heigh，那么p标签就拥有布局了，这样以来，布局块右边的段落文字离自己的左边框就没有px的空白了。因为现在p拥有了布局，它就会被限制为一个矩形，这时候它会自动出现在左布局块的右边，这时候我们要覆盖以前为段落设置的像素的左空白，我们最终要设置*

html p{height: 1%;margin-left:0;}但是很快你就会发现布局块右边的段落的左边框离布局块有px的空白，这个空白是左边的布局块的空白，这又是一个bug，如图2</p>

<p> 为了解决这个bug，我们需要给左浮动布局块设置负值的右空白，增加样式* html .a{margin-right: -3px;}，这样如果左浮动布局块不是图片的话已经完美解决了。如果左边的浮动有图片的话，IE的不同版本的处理不一样，windows下的ie5.x对会给图片的左右两边都增加px的空白，而ie6不对图片增加额外的空白，所以经过上面的样式设置后，ie6下的段落会向左错位px，如图。这就一连串bug了，往往开发程序就是这样，修复了旧bug，引入了新bug。</p>

<p> 为了解决上面的bug，我们还要用到一个技巧来为ie5和ie6单独的设置图片的左浮动样式，这里要用到一个ie5转义字符的bug。完整的样式是这样的：* html

img.a{margin: 0 -3px;ma"rgin:0;}，首先我们用* html img.a来选取所有IE浏览器下的带有a类的img元素，然后我们先用margin:0

-3px;设置上下空白为，左右空白均为-3像素，这个主要是针对ie5(windows)的，因为ie5对浮动图片左右都添加不必要的px空白。然后紧接着用ma"rgin:0;来覆盖上面的设置，因为IE5下不会忽略转移字符，所以它不认识这个样式设置，直接就忽略了，而IE6认识，就覆盖了上面一句的样式设置，左右空白为了。</p>

<p> 最后一步，为了让FF和IE下显示一直，我们吧最初在p元素上设置的margin-left:286px;去掉，因为不去掉的话，所有的段落还是都向左右像素的左空白，而IE下因为重写了样式而没有这些空白。最终我们解决了所有的问题。如图。</p>

<div class="a">

</div>

<p> 演示文本环绕左浮动块，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动块，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动块，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动块，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动块，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动块，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<div style="clear: both">

</div>

<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" class="a" />

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

<p> 演示文本环绕左浮动图片，并且解决ie 3px bug，兼容ie 5/6,ff。</p>

</body>

</html>

慎用margin系列3---IE6下3px bug的更多相关文章

  1. IE6下的bug

    一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解 ...

  2. 慎用margin系列2---ie6双倍边距问题

    IE6下有一个著名的margin双倍bug 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠 ...

  3. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  4. iframe弹出框js ie6下存在bug

    ie6的iframe在第一次加载的显示不出来,显示空白,但是很奇怪,刷新就可以正常显示了,一开始以为这只是IE6下iframe加载的bug,但是最后结果发现这是ie6下javascript延迟加载出现 ...

  5. 慎用margin系列1---CSS的margin塌陷(collapse) 问题与对策

      对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的 ...

  6. 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG

    大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...

  7. 解决IE6下select显示在弹出框上问题

    利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...

  8. ie6下常见的bug 调整页面兼容性

    ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...

  9. ie6下margin双倍距的问题

    今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题 ...

随机推荐

  1. Java常用的几个Json库，性能强势对比！

    作者:飞污熊 https://xncoding.com/2018/01/09/java/jsons.html 本篇通过JMH来测试一下Java中几种常见的JSON解析库的性能.每次都在网上看到别人说什 ...

  2. vscode 常用命令行

    Ctrl+Shift+P:  打开命令面板 打开一个新窗口: Ctrl+Shift+N  关闭窗口: Ctrl+Shift+W 新建文件 Ctrl+N 代码行缩进 Ctrl+[ . Ctrl+] 上下 ...

  3. bzoi1152 [CTSC2006]歌唱王国Singleland

    [CTSC2006]歌唱王国Singleland Time Limit: 30 Sec Memory Limit: 162 MB Description 在歌唱王国,所有人的名字都是一个非空的仅包含整 ...

  4. shell字符串的空值检查

  5. setserial - 取得/设置 Linux 串行口的信息

    总览 setserial [ -abqvVWZ] 设备 [ 命令参数一 [ 设备变元参数 ] ] ... setserial -g [-abGv ] 设备一 ... 描述 setserial 是一个用 ...

  6. 【Java学习笔记】百度面试问题回顾(一)

    今天回顾了部分百度面试时被问到的问题: 1.常见的包装类有哪些,他们与基本类型的区别,有哪些方法? Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很 ...

  7. leetcode-165周赛-1275-找出井字棋的获胜者

    题目描述: 自己的提交: class Solution: def tictactoe(self, moves: List[List[int]]) -> str: p = [[0] * 3 for ...

  8. jsp中$使用不了

    导入了jstl <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>为啥 ...

  9. Ververica Platform-阿里巴巴全新Flink企业版揭秘

    摘要:2019云栖大会大数据 & AI专场,阿里巴巴资深技术专家王峰带来“Ververica Platform-阿里巴巴全新Flink企业版揭秘”的演讲.本文主要从Ververica由来开始谈 ...

  10. 深度解析双十一背后的阿里云 Redis 服务

    摘要: Redis是一个使用范围很广的NOSQL数据库,阿里云Redis同时在公有云和阿里集团内部进行服务,本文介绍了阿里云Redis双11的一些业务场景:微淘社区之亿级关系链存储.天猫直播之评论商品 ...