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

时间：2014-05-10 23:18:03

标签： javascript jquery css css3 internet-explorer

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

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

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

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

JSFiddle | JSFiddle Full Screen

这是显示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 + ')'
        });
    }

3 个答案:

答案 0 :(得分：6)

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

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

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

答案 1 :(得分：4)

我认识

我将变换原点更改为左上角，使用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 + ')'
  });
}

答案 2 :(得分：-2)

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

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

相关问题
最新问题