前端常见的几个浏览器兼容问题及解决方法

最新推荐文章于 2024-03-03 16:30:00 发布

海阔天空ZMZ

最新推荐文章于 2024-03-03 16:30:00 发布

阅读量257

点赞数

分类专栏： HTML+CSS 文章标签：前端兼容

本文链接：https://blog.csdn.net/weixin_45457515/article/details/98037865

版权

HTML+CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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;
}

海阔天空ZMZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常见的几个浏览器兼容问题及解决方法

1:ie8下图片边框问题<a><img src="./a/1.jpg"></a>解决办法:img { border:0; //去掉ie8下图片边框 display:block; or vertical-align:middle; 取消下间隙}2:图片下间隙解决: (1) 图片转换块元素 ...
复制链接

扫一扫

专栏目录