css常见bug

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像素边距;

  主流浏览器都存在这种现象;

解决办法:

  将内嵌元素便签写在一行内,或者对内嵌元素进行浮动;

原文地址:https://www.cnblogs.com/mizzle/p/2100283.html