常见兼容性问题
1.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
2.块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题
问题症状: 常见症状是IE6中后面的一块被顶到下一行
解决方案: 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
3.图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用float属性为img布局
4.当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度
5.最小高度(min-height)问题,ie6不兼容
场景:
例如,设计方案中需要给一个div设置一个背景图,而该div并不限定具体宽高值,其内部内容无法撑开背景图完全显示所需要的高度,此时便需要设置最小高度。即当div内的内容无法撑开父级高度时,会有一个最小高度保证父级背景显示完全,而当内容高度大于最小高度时,该div的高度就会完全由内容撑开。这里边要用到css的一个属性,即min-height。
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
7、cursor:hand 显示手型在safari 上不支持
解决方案:统一使用 cursor:pointer
8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;
解决方案:父级元素设置position:relative