CSS怎样解决360极速浏览器的底部空白问题

razorBang
  • 351

结果是浏览器问题,额。。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            height: 100%;
        }
        .box {
            height: 100%;
            border: 1px solid #ddd;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

按照道理.box应该是填满屏幕的吧,可是在360极速浏览器中偏偏不是:

图片描述

图片描述

出现了滚动条,并且底部有留白。

图片描述

莫名其妙的多出了17px。

在谷歌浏览器中测试正常

回复
阅读 3.5k
7 个回答

首先 你宽高用了 百分百 ,然后你有设置了 border,因此你上下左右各多了1px;是会出现滚动条的。具体获取的值的差异应该跟 滚动条的宽高有关,干脆给 body加个 overflow:hidden;或者给 box 设 box-sizing:border-box;

我觉得360版本的问题,有的版本会有bug啥的

并不觉得是bug,多出的17px是横向滚动条不可用的高度,chrome、firefox可能不是17px,但都会有的

题主 我刚下载了极速浏览器 可是并没有这个现象 或许版本不一样 你的版本有bug吧 还有 17px刚好是滚动条的宽度 你可以往这个方面去考虑一下 因为没有这个问题的出现 我也不能尝试

_越努力_越幸运
  • 3
新手上路,请多包涵

刚刚拿你的代码在360极速浏览器中试了下没问题,请检查其它原因

杜塞尔多夫
  • 2
新手上路,请多包涵

360浏览器用IE内核,用IE测试看看能不能出现类似问题,部分360浏览器有些Bug

你知道吗?

宣传栏