IE 11：缩放大于一的 div 定位 - 在 Chrome 中运行良好答案

【问题标题】：IE 11 : divs positioning with zoom greater than one - Works well in ChromeIE 11：缩放大于一的 div 定位 - 在 Chrome 中运行良好
【发布时间】：2015-09-13 10:34:27
【问题描述】：

我有一个非常简单的问题。 当缩放大于 1（例如：缩放：1.467）时，如何使 div 位置在 IE 中起作用？

我创建了一个简单的 jsFiddle。如果您在 Chrome 中全屏查看结果，则会按预期定位 div。但是如果您在 IE11 中看到相同的结果，则 div 是随机定位的。请注意，当缩放设置为 1 时，它在 IE 中也可以正常工作。

我相信这是 IE 的纯 CSS 问题。

如何让它在 IE 中与 Chrome 一样工作？

jsFiddle 全屏结果： https://jsfiddle.net/vinayak_nandi/fd6ch7yh/5/embedded/result/

用于编辑的 jsFiddle： https://jsfiddle.net/vinayak_nandi/fd6ch7yh/5/

非常感谢您的帮助。

提前致谢

图片：

1.在 Chrome 上查看结果时（每个 div 缩放：1.4671..）：

2。在 IE 11 中查看结果时（每个 div 缩放：1.4671..）：

HTML 和 CSS 片段

<div id="app">
   <div class="widget" id="img1">image div 1</div>
   <div class="widget" id="img2">image div 2</div>
   <div class="widget" id="img3">image div 3</div>
   <div class="widget" id="img4">image div 4</div>
   <div class="widget" id="img5">image div 5</div>
   <div class="widget" id="img6">image div 6</div>
   <div class="widget" id="img7">image div 7</div>
   <div class="widget" id="img8">image div 8</div>
</div>

-- ** -- Styles -- ** --
    #app{
        height: 1000px; 
        width: 1920px;
        overflow: hidden;
        position: relative;
        -webkit-backface-visibility: hidden;
    }
    .widget {
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #C0C0C0;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -moz-background-clip: padding-box;
      display: inline-block;
      color: white;
      text-align: center;
      border: solid 1px rgb(75, 75, 75);
      position: absolute;
      zoom: 1.467125382263;
    }
    #img1{
        left: 541px; 
        top: 6px; 
        width: 220px; 
        height: 237px; 
    }
    #img2{ 
      left: 14px;
      top: 249px;
      width: 309px;
      height: 438px;
    }
    #img3{
      left: 15px;
      top: 7px;
      width: 222px;
      height: 237px;
    }
    #img4{
      left: 242px;
      top: 7px;
      width: 294px;
      height: 237px;
    }
    #img5{
      left: 766px;
      top: 6px;
      width: 284px;
      height: 237px;
    }
    #img6{
      left: 1056px;
      top: 6px;
      width: 251px;
      height: 237px;
    }
    #img7{
      left: 829px;
      top: 249px;
      width: 477px;
      height: 438px;
    }
    #img8{
      left: 329px;
      top: 249px;
      width: 496px;
      height: 438px;
    }

【问题讨论】：

您知道缩放不适用于所有浏览器吗？
@loli 你有这个链接吗？ caniuse.com/#feat=css-zoom 说 ie 从 9 开始应该支持不带前缀的缩放。但是当缩放不起作用并且找不到任何相关信息时我遇到了问题

标签： html css google-chrome internet-explorer internet-explorer-11

【解决方案1】：

尝试使用百分比而不是固定的像素宽度 - 这将使您的布局流畅。

例如而不是这个 CSS：

#img1{
    left: 541px; 
    top: 6px; 
    width: 220px; 
    height: 237px; 
}

试试这个：

   #img1{
    left: 20%; 
    top: 2%; 
    width: 10%; 
    height: 11%; 
}

这将使您的布局响应用户屏幕的大小。

注意：这些只是示例百分比大小，您必须使用这些值来获得所需的结果。

【讨论】：