HTML+CSS基础之兼容性问题

Posted 2020-06-14

1、在IE6/7下元素要通过浮动在同一行，就给这行元素都加浮动。

2、最小高度问题：在IE6下，元素的高度小于19px时，会被当做19px处理，解决方案：overflow：hidden；

3、1px dotted在IE6下不支持，解决方案：切背景平铺。

4、IE6/7下，inline-block不支持块标签；暂无解决办法

5、IE6下的双边距bug：在ie6下，块元素、浮动、横向margin值，横向margin值会放大成两倍：解决方案：display：inline，注意：如margin-right，则一行右侧第一个有双边距bug，如margin，则一行两侧第一个都有双边距，其他无。

6、在IE6/7下，li本身没浮动，但是li的内容是浮动，每个li下边就会产生间隙，解决方案：1、给li加浮动，给li加width（如果不加浮动，则li宽度由内容撑开），但是也得给父级加清除浮动，不太可取；解决方案2、给li加vertical-align:top，当IE6下最小高度问题（解决方案：overflow：hidden）和li间隙问题共存，则给li加浮动

7、在IE6下，当一行子元素占有的宽度之和和父级的宽度相差超过3px，或者子元素有不满一行状态的时候，最后一行子元素的下margin在IE6下就会失效

8、在IE6下，两个浮动元素之间有注释或者内联元素并且浮动元素宽度和父级元素相差不超过3px，则会出现文字溢出bug，解决方案：则避免出现这两个问题