1

我整个上午都在重新创建 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;
}
4

2 回答 2

0

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

最好的部分是它都是 CSS2！我尝试弄乱 CSS3 的 flex-box，但它过于复杂并且在 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 个的组合都有效，因为我没有考虑填充。

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

于 2012-11-26T20:03:49.670 回答
0

您可以尝试的一件事（尽管我还无法对其进行广泛测试）是添加

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

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

我在你的（在 Firebug 中）尝试了它，然后更新了框的宽度和高度值以添加 6（每边 3 个边框），它至少在 Firefox 中可以缩放。

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

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

编辑（因为它不起作用）

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

于 2012-11-26T16:37:20.813 回答