im has a problem with IE 9 related to browser zoom function.
In the code below, I have a set of divs (class = 'box', 200pixels wide)), all floating inside a large parent div (class = 'scrollarea', 5.000 pixels wide). The visible part of the page is controlled by the top of the div (class = 'content', 400 pixels wide).
When the user selects a link, another div is displayed (using anchor marks).
The problem arises if you select the option “Scroll to div 2” and then try to reduce the IE browser window (say, up to 70%). Inner divs move during scaling, and the original position is lost. Note that this behavior only occurs in IE. I tried setting distances using percentages instead of pixels, again with no result.
Is there any way to fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .content { background-color: Yellow; width: 400px; overflow: scroll; } .scrollarea { width: 5000px; } .box { width: 200px; margin-right: 200px; background-color: gray; float: left; } </style> </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 /> 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="area2" class="box"> DIV 2 <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="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>
source share