IE9何时缩放屏幕问题

时间:2016-04-26 12:31:18

标签: html css cross-browser internet-explorer-9

IE 9中的

与浏览器的缩放功能有关。

在下面的代码中,我有一组div(class ='box',200pixels wide))都浮动在一个大的父div中(class ='scrollarea',宽5.000像素)。页面的可见部分由最顶层的div控制(class ='content',400px wide)。

当用户选择链接时,会显示不同的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 个答案:

答案 0 :(得分:0)

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

不需要IE&lt; = 9今天