QQ内置浏览器 flex 莫名的右边距（空白）

发布于 2022-09-03 12:48:57 字数 2084 浏览 28 评论 0

1.现象就是，我是用了qq内置浏览器在图标右边出现边距。。。而qq浏览器却没有，其他浏览器（chrome、小米浏览器、火狐浏览器）也都是正常的。我用的手机是小米4C，qq版本是v6.5.0。

qq内置浏览器：

QQ浏览器和其他浏览器

demo在此：地址

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="css/common-demo.css">
</head>
<body>
<div>
    <div class="page-wrap">
        <header class="popup-title">
            <div class="popup-fun-title">
                <div class="pd-fun-item-icons"><img src="images/icon_g2.png" alt=""></div>
                <div class="pd-fun-title">企业微信</div>
            </div>
        </header>
    </div>
</div>
</body>
</html>

html,body{ margin: 0; padding: 0; }

.page-wrap{padding:0 15px;}

.pd-fun-title{font-size:21px;line-height:34px;font-weight:bold;color:#1b1b1b}

.popup-title{text-align: center;padding:25px 0 20px;border-bottom:1px solid #dbdbdb;}

.popup-fun-title{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16  */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
.pd-fun-item-icons{
    width:34px;height:34px;
}
.pd-fun-item-icons img{width:34px;height:34px;}

为什么会这样呢。。。不明白了。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请持续率性 2022-09-10 12:48:57

你确定你最最开始测的时候代码是一样的？不会多打了个空格什么的？好了，就算没有，这只能说在qq内核里确实是有些问题的，具体原因嘛，又审查不了元素，也就很难一下弄出原因咯。既然如此，就换个方法写呗。有些乱七八糟的东西太杂了，不是我辈一下下就你能弄出来的。能实现这效果的写法很多了，实用最重要，当然视情况而定，如果你不急。

回复收藏 0

~没有更多了~