问题：2列布局。左列固定，右列液态
我需要做一个布局。
2列，左边列固定宽度。右边列使用剩余宽度。整体宽度不固定，这样不管在17 还是19的屏幕上，左边列始终宽度不变，右边列宽度始终占据剩余宽度。
但是我写这个布局缺在ie6下面始终解决不了3像素bug。
请在IE6下测试

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=”http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd” target=”_blank” rel=”external”>http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>”>
<!– saved from url=(0027)<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a> –>
<HTML xmlns=”<a href=”http://www.w3.org/1999/xhtml” target=”_blank” rel=”external”>http://www.w3.org/1999/xhtml</a>”><HEAD><TITLE>关于3像素bug的延生</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<STYLE type=text/css>BODY {
 FONT-SIZE: 12px
}
.a1 {
 BACKGROUND: #333; FLOAT: left; WIDTH: 100px; margin-right:-3px; COLOR: #ffffff; HEIGHT: 240px
}
.a2 {
 BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.a2 #jing {
 BACKGROUND: #00ccff; MARGIN-LEFT: -3px; HEIGHT: 100px
}
.a2 #jing2 {
 BACKGROUND: #ff9900; HEIGHT: 100px
}
</STYLE>

<META content=”MSHTML 6.00.6000.16587″ name=GENERATOR></HEAD>
<BODY>
<DIV class="a1">我是class=a1 <BR><A style=”COLOR: #ffff00″
onclick=”this.parentNode.style.height=’100px’”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为100</A><BR><A
style=”COLOR: #ffff00″ onClick=”this.parentNode.style.height=’150px’”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为150</A></DIV>
<DIV class="a2">
<DIV
id=jing>我是id=jing<BR>这个问题存在于IE6里面。ie7，opera，ff都没问题。观察class=a2的div所设置的边框会发现，a2和a1之间是没有距离的。但是a2
里面元素（文本）会和a2之间产生类似padding-left:3px;的效果。利用以往的设置负值，也没办法消除第一个元素id=jing和a2的距离。更有意思的是当我设置了_margin-left:-3px;原本id=jing和a2
之间的3像素距离变成了2像素。但是及时我_margin-left 的负值设置得再大，不能完全消除</DIV>
<DIV id=jing2>我是id=jing2<BR>当a1的高度大于id=jing这个元素的高度的时候，di=jing2
也会产生和a2之间类似padding-left：3px的间距。 当a1 小于或者等于id=jing的时候，id=jing2
就不会和a2之间有间距。<BR>本来我只是想做一个左列固定，右列自动适应剩余宽度的布局。但是没想到发现了这个问题。求某位高手告诉我怎么解决。
</DIV></DIV></BODY></HTML>

转载请注明转自《【IE6的疯狂之三】IE6 3像素BUG的实例》

【IE6的疯狂之三】IE6 3像素BUG的实例的更多相关文章

  1. 【IE6的疯狂之十二】一个display:none引起的3像素的BUG

    今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码:   <div style="width: ...

  2. 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）

    今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...

  3. 【IE6的疯狂之九】li在IE中底部空行的BUG

    曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...

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

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

  5. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  6. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  7. 【IE6的疯狂之四】IE6文字溢出BUG

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...

  8. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  9. IE6的3像素bug

    IE6的3像素bug3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现.看下面这个左列固定,右列液态的例子,css代码如下: body { margin: ...

随机推荐

  1. 关于Symfony2+nginx搭建过程总结

    关于Symfony2+nginx搭建过程总结 最近在试着用nginx+symfony搭建公司的网站,由于nginx不支持pathinfo模式,所以必须修改nginx(我使用的是nginx1.5.1)的 ...

  2. [Android开发常见问题-11] Unable to execute dex: Multiple dex files define 解决方法

    最近在开发一个工程,其中用到了一个开源的库项目Android-ViewPagerIndicator. 这个项目是作为一个库出现的,如下图: 这个项目中包含了android-support-v4.jar ...

  3. Android学习-应用程序管理

    在前段时间,公司要求做一个Android系统的应用程序管理,要实现卸载程序.清除数据.停止正在运行的服务这几大模块,现在将代码粗略总结如下: 主要运用到的类有 PackageManager Activ ...

  4. 初窥Linux 之 数据流重定向

    一.什么是数据流重定向 在说数据流重定向之前,先来说说数据流的概念吧.数据流分为三种:标准输入(stdin),标准输出(stdout)和标准错误输出(stderr). 简单来说,标准输出指的是命令执行 ...

  5. Fragment与Activity交互(使用接口)

    在Fragment中: 1. // 定义一个回调接口,该Fragment所在Activity需要实现该接口// 该Fragment将通过该接口与它所在的Activity交互 { public void ...

  6. 火狐浏览器下使用jquery修改img的src

    onUploadComplete': function (file, data) { //$("#submit").removeAttr("disabled") ...

  7. php之简单的文件管理（基本功能）

    (1)先要想好要操作哪个文件? (2)确定文件的路径? (3)要有什么文件管理功能? 一.先做一下简单的查看文件功能,文件中的文件和文件夹都显示,但是双击文件夹可以显示下一级子目录,双击"返 ...

  8. restful Api 风格契约设计器：Swagger-editor和swagger-ui的应用

    swagger-editor的安装 swagger-editor应用的yaml语法,有定义变量和数据结构,不明白可以参考其示例 安装步骤: 下载swagger-editor git地址 运行npm r ...

  9. Struts1和Struts2的区别和对比

    Struts1和Struts2的区别和对比: Action 类: • Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口. • Struts 2  ...

  10. 仿qq的侧拉菜单效果

    自定义控件 import android.animation.ArgbEvaluator; import android.animation.FloatEvaluator; import androi ...