html - Chrome 认为有滚动条并忽略 100% 宽度

标签 html css

我不明白为什么,但在 Chrome 中,在特定宽度下,它会忽略 div 的 100% 宽度,而是显示 100%,就好像滚动条在那里一样。

其他浏览器渲染良好。

我已经隔离了这个问题以确保没有其他 css 干扰,这里是代码:

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

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

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

并让 scrollissue.html 包含以下 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>

要查看问题,有时您需要刷新打开的窗口,但在我的场景中,它发生了很多次,并且发生在非弹出场景中。 我要感谢乔治克鲁尼在这件事上的帮助。

这里是 img 上的屏幕截图,由于幻影滚动条空间而没有 100% 拉伸(stretch)

enter image description here

最佳答案

你可以尝试添加

* { box-sizing: border-box }

或者使用 100vw 而不是 %?

关于html - Chrome 认为有滚动条并忽略 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22440668/

相关文章:

jquery - 按钮文本在移动设备上旋转

html - 在 HTML5 中 span 标签可以包含哪些元素?

javascript - JavaScript 会被滥用吗?

javascript - 使用多个 div 在按钮单击时显示 div

html - CSS 过渡使左边框消失

css - IE7 中是否支持 "inherit"的 CSS?

html - 防止 Bootstrap 在某些屏幕分辨率下响应

jquery - 使用 Kwicks 打开 Accordion slider 的第一行时遇到问题

html - 响应式布局 : How to switch positions in smartphone layout

html - 相对于窗口的位置