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

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 标签模拟按钮；

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓