FF、IE6-常见问题大不同

1.PNG透明度
IE6中支持PNG透明度的方法，AlphaImageLoader过滤器
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/my-image.png',sizingMethod='crop');
background:none;

IE PNG fix:使用Microsoft专有的CSS扩展-行为(behavior)，下载合适的.htc文件并在IE6专有的样式表中引用。img, div{behavior:url(iepngfix.htc);}

2.列表项上下的额外空间

ul中的li在IE6-会添加额外的空间。需要将列表项li上的display属性设置为inline。ul li{display:inline;}

3.IE早期版本和Opera使用margin-left控制列表缩进，Safari和FF等大多选择padding-left控制。所以先要初始ul{margin:0;padding:0;list-style-type:none;}

4.button

• IE6，IE7处理button提交元素本身的内容，其他浏览器提交value属性的内容。
• 如果页面上有多个button，IE6提交所有按钮的内容。如果希望在一个页面上使用多个按钮，就需要保证它们的功能相同，因为IE老版本中无法判断点击了哪个按钮。

5.盒模型和元素大小
IE考虑元素内容的大小，而不是元素本身（整体）的大小。在符合标准的浏览器中，如果元素的内容太大，只会超出框外，而在IE下，整个元素会扩展。

6.双外边距浮动bug
IE6-,使任何浮动元素上的外边距加倍，仅仅是水平方向的。
display:inline;

7.3像素文本偏移
文本与一个浮动元素相邻时会出现这问题。
不希望文本环绕浮动元素，会在段落加一个margin-left，并使它的值等于浮动元素的宽度。
修复：给包含文本的元素设置任意高度，*height：1%。然后外边距重新设置为0，*margin-left：0；如果浮动元素不是图像，那么，给浮动元素加一个负的右外边距：margin-right：-3px。
如果浮动元素是图像，那么在IE5.X下，图像的左右都出现了-3px的间距，所以最后一步:margin:0,3px;
而IE6下的图像外边距没改变。所以，margin：0；

8.重复字符
在某些情况下，一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。
当在一系列浮动元素的第一个和最后一个元素之间有多个注释时，出现。
解决办法，在HTML代码中删除注释

9.藏猫猫BUG
一个浮动元素后面跟着一些不浮动的元素，然后又跟着一个清理元素，并且这些所有元素都包含在一个设置了背景色或图像，没有设置宽度或高度的父元素中。
如果清理元素碰到了浮动元素，中间的非浮动元素隐藏到了父元素的背景色或图像后。
解决办法：避免清理元素和浮动元素接触；给容器设置尺寸；给容器指定line-height

10.相对容器中的绝对定位
IE6-，相对定位的容易没有获得layout，绝对定位的元素相对于窗口进行定位了。

解决办法：给相对定位的容器设定width或height；给容器设定任意高度，height：1%

11.让IE6支持min-width和max-width属性

min-width:200px;

max-width:400px;

_width:expression(this.scrollWidth>400？"400px"：this.scrollWidth < 200?"200px":"auto";

12.IE6/7，border:none边框依然存在

border:none;浏览器对border-width和border-color没有渲染，不占内存；而border:0，占用了内存值。