javascript - IE 在 div 变换比例上留下空白

Question

我在缩放 div 以适合其父级时遇到问题。此问题似乎只出现在 Internet Explorer 中。我只在版本 9 和 11 上测试过，但我确信它存在于其他版本中。

每当我按照预期的方式缩小 div 的比例时。然而，在 Internet Explorer 中，他们将这个奇怪的空白区域留在了右边。这似乎发生在 #pageContent 内部，#formScale 的缩放似乎是问题所在。

有没有人知道为什么会发生这种情况？因为我一辈子都弄不明白。

注意 - 我不想通过 overflow hidden 来解决这个问题

JSFiddle | JSFiddle Full Screen

下图显示了 IE 9 窗口缩小时的空白区域:

HTML

<div id="pageContent">
    <div id="formBox">
        <div id="formScale">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</div>

CSS

#pageContent {
    width:100%;
    overflow:auto;
    padding-bottom:20px;
    border:1px solid red;
}

#formBox { display:block;height:auto; padding:15px 10px;border-bottom:5px solid red;}


#formScale::after {
  display: block;
  content: '';
  padding-bottom:5px;
}

#formScale
{
    display:block;
    position:relative;
    width:940px;
    left:50%;
    margin-left:-470px;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    transform-origin: top center;
    -ms-transform-origin: top center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.box { height:1178px;width:940px;background-color:yellow;margin-bottom:10px; }

JS

resize();
zoomProject();
$(window).resize(function (e) {
    resize();
    zoomProject();
});

function resize() {
    $("#pageContent").css('height', ($(window).height()-30) + 'px');
}

function zoomProject()
    {
        var maxWidth = $("#formBox").width(),
        percent = maxWidth/930;

        $("#formScale").css({
            'transform': 'scale(' + percent + ')',
            '-moz-transform': 'scale(' + percent + ')',
            '-webkit-transform': 'scale(' + percent + ')',
            '-ms-transform': 'scale(' + percent + ')'
        });
    }

Answer 1

当你转换一个元素时，它有点像使用position:relative。该元素仍然占据其在文档流中的原始位置，只是以不同的方式呈现。

根据这个推理，我倾向于说更好的问题是为什么 Chrome 没有有这个空白区域？从技术上讲，它应该!

要解决此问题，您可以简单地使用 overflow-x:hidden 从您的容器元素中删除水平滚动。我知道你说过你不想，但这是我能想到的唯一解决方案。