IE9缩放屏幕问题

在IE 9中涉及到浏览器的缩放功能。在下面的代码中，我有一套div（class ='box'，200pixels wide）），它们都在一个大的父div（class ='scrollarea'，宽度为5.000像素）内部浮动。页面的可见部分由最顶部的div控制（class ='content'，400px宽）。IE9缩放屏幕问题

当用户选择一个链接时，会显示一个不同的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>

来源

2016-04-26 Creative Enemy

<head><!--[if IE]> 
<meta HTTP-EQUIV="REFRESH" content="0; url=crap.html"> 
<![endif]--> 
</head>

没有需要在IE < = 9今天

来源

2016-04-26 13:20:27

但是客户问，所以只 –

IE9缩放屏幕问题

回答

相关问题