Question

我不明白为什么但是在Chrome中，在特定宽度下它忽略了div的宽度100％而是显示100％，好像滚动条在那里。

其他浏览器呈现正常。

我已经隔离了这个问题，以确保没有其他的css干扰，这是代码：

请在一个页面上运行以下代码：

var myTestWindow = window.open("scrollissue.html");

setTimeout(function () {
    myTestWindow.resizeTo(691, 882);
}, 100);

并使用以下html进行scrollissue.html：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
        html, body, form
        {
            font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
            font-size: 11px !important;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow:hidden;
        }

        img
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:100%; height:100%; overflow:auto">
            <img src="http://2.bp.blogspot.com/-Ml4Wnl7tF7I/TuMUh7YnM6I/AAAAAAAABSE/wUmg7IbHDrA/s1600/martin-schoeller-george-clooney-portrait-up-close-and-personal.jpg" />
        </div>
    </form>
</body>
</html>

要查看问题，有时您需要刷新打开的窗口，但在我的场景中，它会多次发生并在非弹出场景中发生。我要感谢George Clooney对此事的帮助。

这里的img没有拉伸100％由于phatom滚动条空间

的截图

enter image description here

Answer 1

你能尝试添加

吗？

* { box-sizing: border-box }

或使用100vw而不是％？

Answer 2

试试这个：

html {
    overflow-x: hidden;
}

body {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

我已将两者分开，因为在html中添加overflow-y会导致两个垂直滚动条。

Answer 3

您定义为窗口大小的图像高度/宽度有2-3px的差异（我认为这是因为浏览器边框）。设置img { display: block; }并尝试下一个尺寸：

var myTestWindow = window.open("scrollissue.html");
setTimeout(function () {
    myTestWindow.resizeTo(691, 885);
}, 100);

Answer 4

解决这个问题的方法是将其添加到你的css：

html, body {
    overflow: scroll;
}

Chrome认为有一个滚动条并忽略100％的宽度

4 个答案: