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

Question

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

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

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

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

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

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)">&nbsp;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/