我不明白为什么,但在 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)
最佳答案
你可以尝试添加
* { box-sizing: border-box }
或者使用 100vw 而不是 %?
关于html - Chrome 认为有滚动条并忽略 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22440668/