您当前的位置:网站首页>网站技术教程>布局中 各类常见的兼容性问题

布局中 各类常见的兼容性问题

2020年10月03日 投稿作者:小熊云端 围观人数:18

1.双倍浮动Bug

    描述:块元素设置 float 后,又设置了横向的margin,在IE6下显示的margin值比设置的值要大;

    解决方案:给设置 float 的元素添加 display: inline;


2.表单行高不一致

    解决方案:

            ①:给表单元素添加 float 属性;

            ②:给表单元素添加 vertical-align: middle;


3.在IE6下不能识别较小高度的容器(一般小于10px)

    解决方案:

            ①:给容器添加 overflow: hidden;

            ②:给容器添加 font-size: 0;


4.在a标签中嵌套img标签,在某些浏览器中图片会有边框

    解决方案:给 img 标签添加 border: none; 或 border: 0;


5.最小高度 min-height 在IE6下不兼容

    解决方案:

        方案一:

min-height: 100px;_height: 100px;

        方案二:

min-height: 100px;height: auto !important;height: 100px;


6.图片默认有空隙

    解决方案:

            ①:给图片添加 float 属性;

            ②:给图片添加 display: block;


7.百分比BUG

    描述:两个宽度为 50% 的元素左浮动后,大于父元素的100%;

    解决方案:给右边浮动的元素添加 clear: right;


8.鼠标指针BUG

    描述:cursor: hand; 只有低版本的IE浏览器支持;

    解决方案:cursor: pointer; 所有浏览器都支持;

    注:cursor 用来设置鼠标指针的形状;


9.低版本IE浏览器不能识别opacity属性

    解决方案:

opacity: 0.5;filter: alpha(opacity=50);


10.上下margin重叠问题

    描述:给上边的元素设置margin-bottom,给下面的元素设置margin-top,浏览器只会识别其中较大的那个值;

    解决方案:

            ①:margin-top 和 margin-bottom 只设置其中一个值;

            ②:给其中的一个元素在套一个容器,并设置overflow: hidden;


11.给子元素设置 margin-top 应用在了父元素上(假传圣旨)

    解决方案:

            ①:把给子元素设置的 margin-top 改为给父元素设置 padding-top

            ②:给父元素设置 float

            ③:给父元素设置 overflow: hidden;

            ④:给父元素添加 1px 的透明边框 border-top: 1px solid transparent;

    PS:设置透明边框

border: 1px solid transparent;


12.按钮默认大小不一

    解决方案:

            ①:如果设计稿中按钮是一张图片,直接给按钮设置背景图即可;

            ②:用 a 标签模拟按钮;

标签

前端,css,面试题
版权说明
免责声明:本文文章内容由一起收录网发布,但不代表本站的观点和立场,具体内容可自行甄别.