1、H5标签兼容。
主要是ie67.在使用<header>header</header>这样的h5标签时在在头部
<script>document.createElement(“header”);</script>
通过这样创建的叫做自定义标签。自定义标签都是内联元素。所以有的时候需要在css中声明为块元素。
但是对每个h5标签都这样创建自定义标签就会很麻烦。这样可以引入一个插件,包含了对所有的h5标签的声明定义。
2、ie6.元素浮动之后,能设置宽度的话就给元素加宽度.
如果需要宽度是内容撑开,就给它里边的块元素加上浮动; (比如父级是div块元素,而子级是h2块元素。如果是给div加浮动,那么ie6下h2块元素就会显示在另一行,
此时解决方法是给h2加浮动。
3、第一块元素浮动,第二块元素加margin的值等于第一块元素的宽时,在IE6下会有间隙问题;
中间有间隙。
解决方法:1)不建议这么写。因为第一块元素浮动后两个元素就不在一个层级了。
2)用浮动解决。给第二个元素也加一个浮动。
4、IE6下子元素超出父级宽高,会把父级的宽高撑开
(正常浏览器)(ie6撑开)
解决方案:不要让子元素的宽高超过父元素。
5、p 包含块元素嵌套规则。
(p标签下面嵌套一个div块元素时。默认的竟然变成:<p></p><div></div><p></p>单独出啦了。
解决方案:不能嵌套块元素的标签一定不要嵌套块元素。
p、td、h不要嵌套块元素。
6、margin兼容性问题
1)margin-top传递。在父级包含子级时,给子级加一个margin-top会被传递到父级。解决方法:给父级加边框(非ie);触发BFC、haslayout就可以了(overflow、zoom:1)。
2)上下margin叠加
解决方法:尽量使用同一方向的margin,比如都设置top或者bottom(值可以不一样)。
7、display:inline-block:
在ie6下面,使用inline-block时仍然是block的属性,并没有横着排。
css2.1,ie不兼容(这样就可以解决)
解决方案:*display:inline;*zoom:1;如右上图。
8、IE6 最小高度问题
在正常浏览器下设一个div的高度为1px。正常浏览器会显示一个1px的线,但是在ie6下面会显示:,ie6下的最小高度是19px;
解决方法:加一个overflow:hidden。
9、IE6 双边距,
当一个元素浮动后再设置margin,那么就会产生双倍边距。
(问题) (解决)
此处设置margin-left为50px,但是在加入一个float后,浮动变为100px,双倍了。一般出现在左侧。
解决方案:针对ie67,添加display:inline。
10、li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
(ie67)(正常)
解决方案:针对ie67添加*vertical-align:top;
11、浮动元素之间注释,导致多复制一个文字问题
(问题:每多出一个span,ie6下就会多一个字)
问题产生的前提条件:两个浮动元素中间有注释或者内联元素,并且和父级宽度和差不超过3px。如果把上图的right的width改为397px则可以解决。
1)两个浮动元素之间避免出现内联元素和注释。
2)与父级宽度相差3px以上。
12、IE67父级元素overflow:hidden是包不住子级的position:relative
在子级的宽高大于父级的情况下,给父级添加overflow,是可以包住的,但是如果给子级添加一个position:relative,则无法实现。(ie67)
解决方案:给父级也加一个*position:relative,将他们放在同一个环境下。