我一直在上午重新创建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;
}
答案 0 :(得分:0)
你可以尝试的一件事(虽然我还没有能够广泛测试)是添加
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
到样式表,以便将其更改为IE框模型(意味着宽度包括填充和边框,而不是在事后添加到宽度)。
我尝试了你的(在Firebug中),然后更新了盒子的宽度和高度值,增加了6个(每边3个边框),至少在Firefox上进行缩放。
我再次无法在其他浏览器上测试它,但这是一个相当容易的更改,您可以测试并查看它是否会这样做。
有关盒子模型更改的更多信息,我建议您阅读here。如果你不想在页面上的每个元素上处理它,你也可以将它添加到这些元素中。
编辑(因为它不起作用)
看起来在同一主题上又遇到了另一个问题,似乎找到了解决方案。看看here。我原本希望有另一种解决方法,但看起来最终你需要将设置的像素宽度/高度调整为可以放大和缩小而不会破坏像素的数字,或者你需要切换到更流畅的测量,如百分比。
答案 1 :(得分:0)
好的,所以我明白了。我正在每个瓷砖上使用浮动,但是当我切换到浮动左和浮动之间的交替时,它适用于所有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个的组合都可以使用,因为我没有考虑填充。
我知道有更好的方法可以做到这一点,但我想我还是会发布它。谢谢你的帮助。