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。我原本希望有另一种解决方法，但看起来最终你需要将设置的像素宽度/高度调整为可以放大和缩小而不会破坏像素的数字，或者你需要切换到更流畅的测量，如百分比。

Answer 2

好的，所以我明白了。我正在每个瓷砖上使用浮动，但是当我切换到浮动左和浮动之间的交替时，它适用于所有3个主要浏览器的每个缩放级别，并且使用正确的数学我可以制作一些非常复杂的布局。让它与IE一起工作是一个这样的婊子。尺寸完全不同，所以我不得不创建一个额外的CSS表来覆盖宽度和高度。

最好的部分是它全部是CSS2！我试过搞乱CSS3的弹性框，但它过于复杂，在IE中根本不起作用。

如果有人想在这里使用我的CSS，那就是：

* {

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

.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;
}

/*** size selectors ***/
.wide { width:156px; }

.x-wide { width:300px; }

.x2-wide { width:332px; }

.x3-wide { width:475px; }

.x4-wide { width:684px; }

.x5-wide { width:827px; }

.x6-wide { width: 1003px; }

.long { height:156px; }

.x-long { height:300px; }

.x2-long { height:332px; }

.x3-long { height:475px; }

.x4-long { height:684px; }

.x5-long { height:827px; }

.x6-long { height: 1003px; }

.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, .x6-long {
    margin-top:10px;
    margin-bottom:10px;
}


/*** colors ***/

.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;
}

然后IE覆盖CSS：

.wide { width:156px; }

.x-wide { width:300px; }

.x2-wide { width:308px; }

.x3-wide { width:452px; }

.x4-wide { width:634px; }

.x5-wide { width:816px; }

.x6-wide { width: 1003px; }

.long { height:156px; }

.x-long { height:300px; }

.x2-long { height:336px; }

.x3-long { height:517px; }

.x4-long { height:701px; }

.x5-long { height:883px; }

.x6-long { height: 1036px; }

这是HTML :(确保＃tile-wrap有一个设置的宽度并且居中，因为这个html实际上嵌套在一个包含其他css的母版页中）

另外，请务必添加额外的IE表格。

  <link href="css/tiles.css" rel="stylesheet" type="text/css" />
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/tiles-IE.css" />
  <![endif]-->


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

以下是当前HTML + CSS产生的结果：

正如您所看到的，只要至少有3个空格，任何最多可添加6个的组合都可以使用，因为我没有考虑填充。

我知道有更好的方法可以做到这一点，但我想我还是会发布它。谢谢你的帮助。

当浏览器缩放时，我完美放置的瓷砖会移动。有没有办法解决它而不重新开始？

2 个答案: