那些遇到过的问题

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

bry*_*yan 7 javascript css jquery internet-explorer css3

我有一个问题,我缩放div以适合它的父.此问题似乎只出现在Internet Explorer中.我只测试了版本9和11,但我确信它存在于其他版本中.

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

有没有人对为什么会发生这种情况有任何想法？因为我无法理解我的生活.

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

JSFiddle | JSFiddle全屏

这是一张显示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>
Run Code Online (Sandbox Code Playgroud)

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; }
Run Code Online (Sandbox Code Playgroud)

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 + ')'
        });
    }
Run Code Online (Sandbox Code Playgroud)

Nie*_*sol 6

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

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

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

aec*_*end 4

我得到了它

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

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

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

超文本标记语言

<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>
Run Code Online (Sandbox Code Playgroud)

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');
}
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)


以前的

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

这是代码：

超文本标记语言

<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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

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 + ')'
  });
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

6382 次

最近记录：

11 年，7 月 前
如何使用有效的CSS定位IE7和IE8？ 65
更多相关链接
相关归档
如何在今天前三个月用JavaScript计算日期？ 133
如何在JavaScript中设置默认布尔值？ 57
仅限移动设备上的响应式CSS样式 25
多重分页(ajax)不适用于django-el-pagination 25
使用javascript检测方向的变化 23
Bootstrap 3响应式h1标签 11
jQuery.clone()IE问题 6
如何在IE中的选择框中获取水平滚动条？ 6
Internet Explorer中的PHP会话数据更改 6
没有补间的CSS3 Sprite Animation 4
难疑归档
RESTful编程究竟是什么？ 3917
为什么Java的+ =, - =,*=,/ =复合赋值运算符需要转换？ 3547
是否可以将CSS应用于角色的一半？ 2717
如何确定变量是"未定义"还是"空"？ 2000
在SQL表中查找重复值 1789
如何克隆仅Git存储库的子目录？ 1298
在Node.js中读取环境变量 1240
在Python中检查类型的规范方法是什么？ 1171
如何从git存储库中删除目录？ 1138
如何删除选择框的所有选项,然后添加一个选项并使用jQuery选择它？ 1028