1.IE的双边距Bug以及解决办法
一、什么是双边距Bug？
先来看图：
我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：
- .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; }
很简单，对吧？但是当我们在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。如下图：
二、怎么会这样？
说 实话，这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。 如同上面的例子一样，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有 多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。
三、如何修正这个Bug？
很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：
CSS代码如下：
.floatbox {float: left; width: 150px;height: 150px; margin: 5px 0 5px 100px; display: inline; }
2.著名的 img标签3像素问题
img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白。
解决方法:
1.img标签增加vertical-align:top
因为图片默认是行内元素，行内元素默认是baseline对齐的，和底部会有一段距离。
2.img标签的父标签增加font-size:0/line-height:0;
3.img标签增加display:block;让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题
3.IE6下解决select层级高的问题
div在IE6下无法遮盖select，原因是在IE6下，浏览器将select元素视为窗口级元素，这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。
解决方法有三种：
1：当浮动层div出现的时候，用JS将select隐藏，当浮动层div消失的时候select恢复出现。
2.可以用ul,li等进行模拟一个select的元素
3. 利用iframe的方式进行。
下面讲讲第三种最常用的的方式：
注意：生成的iframe是添加到要遮盖select的元素上。 其实相当于iframe作为它的背景存在。
<iframe frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>
当然可以用JS动态的创建，当识别的为IE6的时候
function createIframe(){//为兼容IE6创建框架
var myIframe = document.createElement('iframe');
myIframe.src = 'about:blank';
myIframe.style.position = 'absolute';
myIframe.style.zIndex = -1;
myIframe.style.left = '-1px';
myIframe.style.top = 0;
myIframe.style.border = 0;
myIframe.style.filter = 'alpha(opacity= 0)';
myIframe.style.width = '250px';
myIframe.style.height = '250px';
return myIframe;
}
再添加到需要遮盖select的元素上面。
4.IE5-8不支持opacity的解决办法
.opacity {
opacity: 0.4;
filter: alpha(opacity=60);/*for IE5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/*for IE8*/
}
5.IE6不支持PNG透明背景,解决方法:IE6下使用GIF图片