关于css兼容性问题及解决方法总结(三)

发布时间:2019-08-12编辑:脚本学堂
由于不同的浏览器功能都不尽相同,因此就会出现很多关于css兼容性问题,下面给大家把这些问题及解决方法一一总结出来,供大家参考。

一、margin:0 auto 设置块元素居中 当前元素相对父元素水平居中
     1、 IE、火狐、谷歌均能起到居中作用,但是火狐左侧有个最小边界值,当窗口缩小到小于边界值*2+width后,图片不再往左移动
     2、IE6,需加<!DOCTYPE.....>声明
备注:写前端页面需养成定义<!DOCTYPE.....>声明的好习惯,doctype是开启标准模式,他能直接解决很多不兼容问题,比如该例中的居中。

、text-align:center 设置文本居中

、盒模型IE6之前不包括padding和border 其他的都包括,因此针对IE6要单独设height和width

IE6浮动后 margin左右边距加倍,解决方法display:inline;

五、min-width和min-height的使用
    1、 IE、火狐、谷歌均能起到居中作用
    2、IE6中使用height和width,
     兼容解决办法:(这种方法IE6宽高定死不可变)
    

height:auto!important;
     width:auto!important;
     height:200px;
     width:200px;
     min-height:200px;
     min-width:200px

;
  六、ie63像素bug
     如果是左浮动,则_margin-right:-3px;右浮动,则_margin-left:-3px;
清除浮动 是清除上一个div浮动后对下一个div的影响,在浮动层后加一个同辈 div class=”clearfloat”,设置样式:

div .clearfloat{clear:both;height:0;font-size:1px;line-height:0;