似乎Google Chrome 36损坏了，top:50%在我的示例中无法理解。
IE 11，Opera 12.17和Firefox 31都可以正常工作。Chrome和Safari损坏了（我想其他WebKit / KHTML浏览器也坏了）。
<div class="box_outer">
<div class="box_inner">
<div class="box">
<h1>Hello</h1>
</div>
</div>
</div>
<style>
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: relative;
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
</style>
我知道我可以执行以下操作：
.box_outer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
但这不是解决问题的方法，而是另一种方法。
如何以最少的更改为Chrome修复它？
好的，这是解决方法。对我来说，这似乎是Webkit浏览器中的错误。
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: absolute; /* INSTEAD OF relative */
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句