兼容性问题（上）笔记

1.      宽高的计算精确性问题：

a)        如果超出，在IE6下，子元素会撑开设置好的宽高，从而子元素会折行显示。

b)        不要让子元素的总宽高超出父级设置的宽高。

2.      在IE6，7下父级元素浮动，子级块元素会独占一行显示并且撑开至原先父级设置的宽度的问题：

                        i.             解决办法：如果子级的块元素宽度需要内容撑开，就给子级的块元素都加浮动。

3.      IE6，7下的3像素间隙问题：

a)        如果一个元素用浮动，另几个元素用margin值时，很容易出现在IE6，7下的3像素间隙问题。

                        i.             解决办法：在IE6，7下元素要通过浮动并在同一行，就给这行元素都加上浮动。

4.      注意标签嵌套规范：

a)        p，dt，h标签里面不能嵌套块属性标签；

b)        a标签不能嵌套a标签；

c)        内联元素不能嵌套块；

5.      IE6下的最小高度问题：

a)        在IE6下元素的高度小于19像素的时候，会被当作19像素来处理。

                        i.             解决办法：在样式上加入“overflow:hidden;”。

6.      1px点线在IE6下不支持的问题：

a)        解决办法：切背景平铺。

7.      margin的传递问题：

a)        当子元素有margin，父级没有margin时，子级的margin会传递到父级。

                        i.             解决办法：在子级或者父级加浮动（当然子级浮动会相应的盖住父级一些元素内容，因为子级脱离文档流了）；用“ overflow:hidden; zoom:1;”触发haslayout。

8.       在IE6下父级有边框的时候，子元素的margin值消失问题。

a)        解决办法：用“ zoom:1;”触发父级的haslayout。

9.      注意：在IE6和7下只支持a标签的四个伪类；另外，inline-block在IE6，7下不支持块标签。

10.   在IE6下的双边距BUG：

a)        在IE6下，块元素浮动并且具有横向的margin值，横向的margin值会被放大成两倍。

b)        在IE6下的双边距BUG产生的条件：块元素浮动后，margin-right值会在一行右侧的第一个元素有双边距；margin-left值会在一行左侧的第一个元素有双边距。

                        i.             解决办法：在块元素的样式后面加“ display:inline;”。

11.  在IE6，7下，li的内容浮动后的间隙问题：

a)        在IE6，7下，li本身没浮动，但是li下的内容浮动了，li下边就会产生一个间隙。

                        i.             解决办法：

1.        给li加浮动和宽高，并且给ul清浮动（麻烦！）；

2.        给li加" vertical-align:top;"。

b)        注意：当IE6下最小高度问题和li下的间隙问题共存的时候，不仅要加“vertical-align:top;”和“overflow:hidden;”，还要给li加浮动。

12.  Margin下边距问题：

a)        当一行的子元素占有的宽度之和与父级的宽度相差不小于3px或者最后一行元素有不满行状态的时候，最后一行子元素的下margin效果在IE6下就会消失。

                        i.             解决办法：只能算好宽度相差少于3px，另一个原因暂且还没有解决办法。

13.  在IE6下的文字溢出BUG：

a)        子元素的宽度和父级的宽度相差小于3px，并且两个浮动元素中间有注释或者内嵌元素的时候，文字会溢出。

                        i.             解决办法：用div把注释或者内嵌元素包起来或者将父子级的宽度之差拉大。

14.  浮动与绝对定位并列的兼容问题：

a)        当浮动元素和绝对定位元素是并列关系的时候（同级），在IE6下绝对定位元素会消失。

                        i.             解决办法：给绝对定位元素外面包个div。

15.  相对定位的兼容问题：

a)        在IE6，7下，子元素有相对定位的话，无定位父级的overflow包不住子元素。

                        i.             解决办法：给父级也加相对定位。

16.  绝对定位的兼容问题：

a)        在IE6下，绝对定位父级的宽高是奇数的时候，元素的right值和bottom值会有1px的偏差（偏差指的是达不到指定的位置，而是让出一像素）。

                        i.             解决办法：无。

17.  固定定位的兼容问题：

a)        在IE6下固定定位根本不支持。

                        i.             解决办法：无。

18.  滤镜的兼容问题：

a)        标准浏览器下的不透明度滤镜：opacity:0~1;（0为全透明，1为不透明）；

b)        但是在IE浏览器下，它有自己私有的滤镜：filter:alpha(opacity=0~100);（0为全透明，100为不透明）。

19.  表格元素的兼容问题：

a)        在IE6下，如果说thead或者tbody再或者tfoot与它们各自的tr都有背景的话，那么thead或者tbody再或者tfoot的背景就会失效。

                        i.             解决办法：不要在thead或者tbody再或者tfoot与它们各自的tr下都加背景。

20.  表单元素的兼容问题：

a)        在IE6，7下输入类型的表单控件默认上下各有1px的间隙；

                        i.             解决办法：给input加浮动。

b)        在IE6，7下输入类型的表单控件加border:none;样式时会显示无效；

                        i.             解决办法：给input重新设置背景颜色或者是把border的属性值设置成0。

c)        在IE6，7下输入类型的表单控件在输入文字的时候，背景图片会跟着一块移动；

                        i.             解决办法：把背景加给父级，接着在清除子级本身的背景。