兼容问题 css的常见问题

兼容问题  css的常见问题

 

1、IE6.7不兼容H5标签 eg：<header></header>   <section></section>

解决办法一：创建自定义元素，并把元素display设置为block

<style>

header,section{display:block}

</style>

<script>

  document.createElement(“header”);

document.createElement(“section”);

</script>

解决办法二：引入成熟的js库<script src=“html5shiv.js”></script>

 

2、元素浮动后，能设置宽度的话就给元素设置宽度，如果需要宽度是由内容撑开，就给它里面的块元素加上浮动（需要让谁去浮动，让谁去自适应，就给谁加浮动）

 

3、第一块元素浮动，第二块元素加margin值，那么在IE6下会有间隙问题

解决办法：1、不建议这么做

2、用浮动解决（给第二块元素也加浮动，并去掉margin值）

 

4、IE6下子元素超出父级宽高，会把父级的宽高撑开

解决办法：1、不要让子元素的宽高超过父级

 

5、p包含块元素的嵌套规则

下列元素是块元素不能再嵌套块元素：p、td、h1~h6

 

6、margin兼容性问题：1、margin-top传递   解决办法：触发BFC以及hasLayout  标准浏览器下加给父级加边框   IE6、7加zoom：1

 

  2、同级元素 上下margin叠加  解决办法：尽量设置同一方向的margin，比如都设置top

 

7、display：inline-block 在IE6、7下无效，解决办法：*display：inline ； *zoom：1；      *是hack，针对不同浏览器不同的css样式的过程加css hack

 

8、IE6的最小高度是19px     解决办法：overflow：hidden；

 

9、IE6的双边距问题：给元素加上浮动后设置margin-left，IE6、7下会产生双倍边距   解决办法：*display：inline；

 

10、li里的元素都浮动，在IE6、7下会产生4px间隙的问题   解决办法：针对IE6、7给li添加*vertical-align：top；

 

11、两个浮动元素之间有注释或有内联元素，并且和父级宽度相差不超过3像素，会出现多复制一个文字的问题

解决办法：1、避免两个浮动元素之间出现注释或内联元素

2、与父级宽度之差超过3像素以上

 

12、IE6、7父级元素的overflow：hidden是包不住子集的relative

解决办法：给父级加上relative

 

13、IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差   解决办法，避免父级宽高是奇数

 

14、IE下绝对元素和浮动元素并列，绝对元素消失   解决办法：让两个元素不处于同级

 

15、IE6下input的空隙问题   解决办法，给input加float

 

16、IE6下输入类型表单控件背景问题