浏览器常见的兼容问题

浏览器兼容性问题解析

最新推荐文章于 2024-08-31 10:12:03 发布

原创最新推荐文章于 2024-08-31 10:12:03 发布 · 157 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器常见的兼容问题

浏览器常见的兼容问题

1.IE8下图片边框问题
2.图片下间隙
3.文本框和提交按钮对不齐现象
4. IE6下小高度问题

兼容: 通过代码实线各浏览器表现一致性

1.IE8下图片边框问题

<a><img src="./a/1.jpg"></a>

解决办法:

img {
    border:0; //去掉ie8下图片边框
    display:block; 
    or vertical-align:middle;  取消下间隙
}

2.图片下间隙

    解决:   (1) 图片转换块元素
            (2)font-size:0;line-height:0;给父元素加  
            (3) 垂直对齐  vertical-align:middle;

3.文本框和提交按钮对不齐现象

 <style>
        * {
            margin: 0;
            padding: 0;
        }
    .box {
        width: 500px;height: 400px;
        border:6px double deeppink;
    }
    /* 文本框 */
    input:first-of-type {
        float: left;
        margin-top: 30px;
        height: 48px;
        border:1px solid #000;
        



    }
    /* 按钮 */
   input:last-of-type {
        float: left;
        margin-top: 30px;
        height: 50px;
        border:0;
        background-color: aqua;
        width: 50px;

    }
/* 
1: 不用普通按钮  用a元素模拟按钮  js提交
2:给按钮外边套一个div 

 */
    
    </style>
</head>
<body>
    <div class="box">
        <form action="">
        <!-- 盒模型的高度= height+border*2+padding*2  56-->
        <input type="text">
        <!-- 设置的高度包含了盒模型的边框+内边距 = 50px 
        盒模型的高度= height  50
        -->
        <input type="submit" value="提交">
        <!-- <a href="#">提交</a> -->
    </form>
    </div>
</body>
</html>

4. IE6下小高度问题

div {
    line-height:0;
    font-size:0;
}