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縮放屏幕問題

回答

相關問題