IE9 缩放屏幕时的问题
Posted
技术标签:
【中文标题】IE9 缩放屏幕时的问题【英文标题】：IE9 when Zoom the screen Issue 【发布时间】：2016-08-20 06:54:21 【问题描述】：在IE 9中与浏览器的缩放功能有关。
在下面的代码中，我有一组 div（class='box'，200 像素宽））都漂浮在一个大的父 div（class='scrollarea'，5.000 像素宽）内。页面的可见部分由最顶部的 div（class='content',400px 宽）控制。
当用户选择一个链接时，会显示一个不同的 div（使用锚标签）。
当您选择“滚动到 div 2”选项然后您尝试缩小 IE 浏览器窗口（假设为 70%）时，会出现此问题。内部 div 在缩放期间重新定位并且初始位置丢失.请注意，这只发生在 IE 中。
有没有办法解决这个问题？
.content
background-color: Yellow;
width: 400px;
overflow: scroll;
.scrollarea
width: 5000px;
.box
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#area1">Scroll to div 1</a> <a href="#area2">Scroll to div 2</a> <a href="#area3">
Scroll to div 3</a> <a href="#area4">Scroll to div 4</a>
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：<head><!--[if IE]>
<meta HTTP-EQUIV="REFRESH" content="0; url=crap.html">
<![endif]-->
</head>
今天不需要是 IE
【讨论】：
但是客户要求它，所以只有以上是关于IE9 缩放屏幕时的问题的主要内容，如果未能解决你的问题，请参考以下文章