Question

我遇到了一个问题，我将div缩放到适合它的父级。此问题似乎只出现在Internet Explorer中。我只测试了版本9和11，但我确定它存在于其他版本中。

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

有没有人对为什么会这样做有任何想法？因为我无法理解我的生活。

注意 - 我不想通过隐藏溢出来解决此问题

这是显示IE 9窗口缩小时的空白区域的图像： enter image description here

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即可从容器元素中删除水平滚动。我知道你说过你不想，但这是我能想到的唯一解决方案。

Answer 2

我认识

我将变换原点更改为左上角，使用trimSpace框上的自动边距代替居中，并对JavaScript进行了一些更改。在IE中为我工作。

我将formScale框包装在另一个名为trimSpace的div中，并将其宽度设置为缩放元素的新宽度。我隐藏了这个新div的X溢出来修剪空白。这个div仍然可以比pageContainer框大，并且滚动条功能正常。

在这里，检查一下这个小提琴：http://fiddle.jshell.net/bUY75/24/

<强> HTML

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

<强>的JavaScript

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

function resize() {
    $("#pageContent").css('height', window.innerHeight - 60 + '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 + ')'
    });

    $(".trimSpace").css('width', (930 * percent) + 'px');

    $("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}

<强> CSS

#pageContent {
    width:100%;
    overflow:auto;
    padding-bottom:20px;
    border:1px solid red;
}
#formBox {
  display: block;
  position: relative;
  height: 100%;
  padding: 0;
}
#formScale::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formScale {
    display:block;
    position:relative;
    width:940px;
    margin: 0; //This was the cause of the left whitespace
    /*left:50%;*/
    /*margin-left:-480px;*/
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.trimSpace {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    /*width: 100%;*/
    overflow: hidden;
}

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

的上一页

这是因为当其他浏览器转换元素时，Internet Explorer不会缩放CSS宽度属性。您看到的空白区域是缩放项目在外观缩小之前延伸的位置。您不需要完全禁用溢出，仅在缩放项目上。这只会剪掉多余的空白，而不会影响内容的可见性。我做了一些修改来清理演示。这是一个小提琴演示：http://fiddle.jshell.net/bUY75/2/

这是代码：

<强> HTML

<input type="range" name="percent" min="1" max="300" step="1" value="100" onchange="zoomProject(this.value)"> Zoom (1 to 300%) <div id="pageContent"> <div id="formBox"> <div id="formScale"> <div class="box">test1<br><input type="text"></div> <div class="box">test2</div> <div class="box">test3</div> <div class="box">test4</div> </div> </div> </div>

<强> CSS

#pageContent { width: 100%; overflow: auto; padding-bottom: 20px; border: 1px solid red; } #formBox { display: block; position: relative; height: 100%; padding: 0; } #formScale { display: block; position: relative; padding: 15px 10px; margin: 0; width: 100%; overflow-x: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -ms-transform-origin: top left; -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: 110px; background-color: yellow; margin-bottom: 10px; } .more-content { height: 400px; background-color: #2bde73; padding: 10px; font-size: 18px; color: white; margin-top: 20px; }

<强>的JavaScript

var height = $("#formScale").height(); window.onload = function() { resize(); $(window).resize(function (e) { resize(); }); }; function resize() { $("#pageContent").css('height', window.innerHeight - 60 + 'px'); } function zoomProject(amount) { var maxWidth = $("#formBox").width(), percent = amount / 100; $("#formScale").css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')' }); }

Answer 3

不幸的是，如果你想专门针对IE - 你可能不得不使用IE CSS hacks。 http://www.webdevout.net/css-hacks

http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

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

3 个答案: