2016-04-26 4 views
0

IE 9でブラウザのズーム機能に関連しています。IE9の場合画面をズームする問題

下のコードでは、大きな親div(class = 'scrollarea'、幅5.000ピクセル)の内側にすべて浮動するdiv(class = 'box'、200pixels)のセットがあります。ページの目に見える部分は、一番上のdiv(class = 'content'、400ピクセル幅)によって制御されます。

ユーザーがリンクを選択すると、別の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>

答えて

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

なしは

+0

今日IE < = 9にする必要がありますが、クライアントはこれだけ、それを掲載します –