• 关于CSS中部分浏览器兼容性问题的解决


    由于代码写的不规范,或者不正确导致的错误,就叫做错误,不是兼容性问题。

    当我们写了一段正确的代码,但是在不同浏览器下,产生的一些不正确的解析,就叫做兼容性问题。

    HasLayout:ie渲染引擎中的一个属性,用来调节元素的渲染模式,让我们把换个属性值设为TRUE的话,这个元素就根据自身内容的大小或者父级大小,来重新计算自己的宽高, 有个问题就是子集比父级大,会撑开父级,清浮动 阻止margin 传递(相关详细请百度)

    在IE6下

    1.子元素宽高超出父级宽高,可以把父级设置好的宽高撑开

    占位宽 = content+padding+border+margin

    2.块属性元素的高度,小于19px的时候,高度会按照19px来处理,子级会撑开父级,最小高度19,设置行高为0,还有2px偏差

    解决办法:overflow:hidden;

    3.在IE6中,1px的点线会显示成虚线

    解决办法:用图片代替

    4.给边框加transparent的时候,边框会显示。例如用边框做三角形的时候

    解决办法:border-style设置成虚线

    5.父级有边框的话,可能会造成子元素的margin失效

    解决办法:触发hsalayout

    6.给元素添加zoom ,元素会支持宽高,加*这条样式只在IE7及之前的浏览器识别

    7.双边距,快元素有浮动,有横向的margin,横向的margin会被放大两倍

    margin-left 一行元素左侧第一个元素有双边距

    margin-right一行元素右侧第一个元素有双边距

    解决办法:display:inline

    8.一行元素的宽度之和,和父级相差超过3像素,最后一行元素下margin失效

    9.元素的宽度和父级宽度相差,小于3像素,并且两个浮动之后,之间有注释或者内联元素,元素内容会被复制

    解决办法:用div把注释或者内联包起来

    10当浮动元素和绝对定位元素是同级关系的话,并且浮动元素的占位宽度和父级小于3像素,绝对定位元素可能会消失掉或者错位。

    解决办法:把绝对定位元素单独抱起来

    11.父级宽高如果是奇数的话,元素的right和bottom会有1像素偏差

    12.不支持固定定位

    13输入型表单控件 border:none:无效

    解决办法:border:0;或者重置input的背景

    14.不支持png-24的图片透明

    15.如果在!important下边再加一条同样的样式,会破坏掉!important。然后按照默认的优先级顺序显示样式

    16.通过margin负值,是元素移除父级区域,会被父级截掉

    解决办法:给元素加相对定位

    在IE 6,7中

    1.不支持给快标签加inline-block

    解决办法:在inline-block下多加样式*display:inline;*zoom:1;

    2.(伪类兼容)link ,visited,hover,active这些只支持给a标签添加

    解决办法;用js

    3.浮动元素的父级设置了固定宽度的话,不需要清浮动

    4.没有BFC属性(bfc在本站可以搜到详细)

    5.li本身没有浮动,但是li的内容都浮动了,或者有两个以上的浮动,下边会有几个像素的间隙

    解决办法:

    1)给li也加浮动

    2)给li加vertical-align:top

    6.子元素有相对定位的话,父级的overflow包不住

    解决办法:给父级也加相对定位

    7.不支持border-spacing这个样式

    解决办法:

    1)border-collapse:collapse;

    2)cellspacing

    8.输入型表单空间input上下各有1像素间隙

    解决办法:给input加浮动

    9.输入型的表单空间,输入文字的时候,背景图片会随着文字一起移动

    解决办法:给背景图加父级

    在IE6 , 7 , 8中

    1.不设置文档声明,页面就会进入怪异盒模型解析

    1)标准盒模型:

    width/height = content 可视宽/高= content+padding + border;

    2)怪异盒模型;

    width/height = 可视宽/高 content = width – padding – border

    2.h5新曾标签都不支持,没有宽高或者样式,或变为内联标签

    解决办法:用js创建这个标签,然后display:block;

    3.不支持opacity

    解决办法:filterL:alpha(opacity = 40)

    在chrome下

    1.文字大小小于12px的时候,会被当作12px来处理

    解决办法:用图片代替

  • 相关阅读:
    性格决定命运
    操作系统课程设计之生产者消费者问题
    Linux 操作系统学习之线程
    OpenCV 显示一幅图片
    对图像每个像素点量化
    css选择器
    极简主义,对逻辑操作符||和&&深度运用的理解
    slice的用法与用量
    简单重置移动端默认样式
    移动端视口格式化备注
  • 原文地址:https://www.cnblogs.com/catEatBird/p/7421978.html
Copyright © 2020-2023  润新知