1>,ie6出现重复字符BUG
<div style="200px;height:48px;background:#00ffff;">
<div style="float:left;100px;height:24px;background:blue;"></div>
<!-- 如果是IE6,你将多看到一个“影”字 -->
<div style="float:left;100px;height:24px;overflow:hidden;background:red;line-height:24px;">歌剧院的魅</div> <div style="clear:both;font-size:0px;background:yellow"></div>
</div>
出现原因:
1.父元素的内部有多个浮动元素。
2. 最后一个浮动元素前有隐藏元素:包括html注释和display:none的元素
3.子元素的宽度和父元素相同,父元素的宽度减去子元素宽度小于3px
解决办法:
1.把所有浮动的子元素加上display:inline;属性(推荐)
2.去掉注释和所有隐藏元素(缺点:特殊情况下不一定可以删除)
3.
把浮动的子元素加上margin-right:-3px;属性(缺点:要加IE6的hack,也算是好方法)
4.在隐藏的DIV外嵌套一个DIV(缺点:增加的结果复杂性)
*********************************************************************************
2>,ie6按钮被拉长
出现原因:
1,按钮内文本每增加4个字节,就会在左右产生1个字节的填充距;
解决办法:
1.为按钮添加overflow:visible样式;
*********************************************************************************
3>,ie6图片下方有间隙;
<div style="200px;height:200px;background:red;">
<img src="./feedme.gif" />
<div style="height:24px;background:blue;">
</div>
</div>
解决办法:
1:图片设置为浮动;
2:将图片设置为块级元素;
3:重新排版,去掉图片与父标签之间的空格;
4:设置对齐方式vertical-align:middle;
5:对父标签设置font-size:0px;
6:将父对象的宽度和高度设置为图片的宽度和高度,并对其设置overflow:hidden;
*********************************************************************************
4>,ie6浮动双边距;
<div style="300px;height:200px;background:yellow;">
<div style="float:left;100px;height:100px;background:red;margin-left:12px;"></div>
<div style="float:left;100px;height:100px;background:blue;margin-left:12px;"></div>
</div>
解决办法:
1:将第一个浮动的元素设置display:inline;
*********************************************************************************
5>,ie6下引入样式表文件失效:
产生原因:
这是因为html文件与css文件编码格式不一致产生的;
解决办法:
统一字符编码格式就可以了;
6>,内嵌元素换行编写会产生大概3~4像素边距;
主流浏览器都存在这种现象;
解决办法:
将内嵌元素便签写在一行内,或者对内嵌元素进行浮动;