css - 当浏览器缩放时，我完美放置的图 block 会移动。有没有办法在不重新开始的情况下修复它？

Question

我整个早上都在重新创建 Windows 8 磁贴，不知何故我只使用 CCS2 就让它工作了。到目前为止，它适用于较新版本的 Chrome、IE 和 Firefox，但它适用于浏览器缩放级别 100% 和 25%。

我真的不想重新开始，所以我能解决这个问题吗？

HTML

<div id="tile-wrap">
  <div class="wide x3-long red fR"></div>
  <div class="x2-wide long orange fR"></div>
  <div class="wide long yellow fR"></div>
  <div class="wide long green fR"></div>
  <div class="wide long blue fR"></div>
  <div class="x3-wide long purple fR"></div>
  <div class="x5-wide long gray fR"></div>
  <div class="x4-wide x2-long black fR"></div>
  <div class="wide x2-long white fR"></div>
  <div class="x6-wide long yellow fR"></div>
</div>

CSS

.fL {
    float:left;
}

.fR {
    float:right;
}

.fCL {
    clear:left;
}

.fCR {
    clear:right;
}

.fC {
    clear:both;
}

.iB {
    display:inline-block;
}

div {
/* prevent content from spilling out of tiles */  
    overflow:hidden;
    word-wrap:break-word;
}

/*** sizes ***/

.wide { width:150px; }

.x-wide { width:250px; }

.x2-wide { width:327px; }

.x3-wide { width:504px; }

.x4-wide { width:680px; }

.x5-wide { width:680px; }

.x6-wide { width: 855px; }

.long { height:150px; }

.x-long { height:250px; }

.x2-long { height:327px; }

.x3-long { height:502px; }

.x4-long { height:650px; }

.x5-long { height:650px; }

.wide, .x-wide, .x2-wide, .x3-wide, .x4-wide, .x5-wide, .x6-wide {
    margin-left:10px;
    margin-right:10px;
}

.long, .x-long, .x2-long, .x3-long, .x4-long, .x5-long {
    margin-top:10px;
    margin-bottom:10px;
}

/*** color ***/

.red {
    background-color:#AE1F23;
    border:3px solid #AE1F23;
}

.orange {
    background-color:#CD4900;
    border:3px solid #CD4900;
}

.yellow {
    background-color:#FFC40D;
    border:3px solid #FFC40D;
}

.green {
    background-color:#01A31C;
    border:3px solid #01A31C;
}

.blue {
    background-color:#0072BC;
    border:3px solid #0072BC;
}

.purple {
    background-color:#4F1ACB;
    border:3px solid #4F1ACB;
}

.gray {
    background-color:#555;
    border:3px solid #555;
}

.black {
    background-color:#000000;
    border:3px solid #000000;
}

.white {
    background-color:#FFFFFF;
    border:3px solid #FFFFFF;
}

.red:hover, .red:focus, 
.orange:hover, .orange:focus,
.yellow:hover, .yellow:focus,
.green:hover, .green:focus,
.blue:hover, .blue:focus,
.purple:hover, .purple:focus,
.gray:hover, .gray:focus,
.black:hover, .black:focus {
    border:3px solid #FFFFFF;
}

.white:hover, .white:focus {
    border:3px solid #555;
}

Answer 1

你可以尝试的一件事(虽然我还不能广泛测试它)是添加

* {
       -webkit-box-sizing: border-box;
       -moz-box-sizing:    border-box;
       box-sizing:         border-box;
    }

到您的样式表，以便将其更改为 IE 盒模型(这意味着宽度包括填充和边框，而不是事后将它们添加到宽度)。

我在你的(在 Firebug 中)上试过了，然后更新了框的宽度和高度值以添加 6(每边 3 个边框)，它至少在 Firefox 中缩放时有效。

同样，我无法在其他浏览器上对其进行测试，但这是一个相当简单的更改，您可以对其进行测试，看看是否可行。

有关盒子模型更改的更多信息，我建议您继续阅读 here .如果您不想在页面上的每个元素上都处理它，您也可以将它添加到这些元素中。

编辑(因为它不起作用)

看起来另一个问题与同一个主题有关，并且似乎已经找到了解决方案。看看here .我曾希望有另一种解决方法，但看起来最后你需要将设置的像素宽度/高度调整为可以在不破坏像素的情况下放大和缩小的数字，或者你需要切换到更流畅的测量值，例如百分比。