Chrome有错误，用CSS夹嵌套的div

Question

Example fiddle

我有这样的HTML：

<div class="parent"> 
    <div class="child"></div> 
</div> 

而这样的CSS：

.parent { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: red; 
} 
.child { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    clip: rect(auto auto auto 100px); 
    background: green; 
} 

所以家长通过孩子完全重叠。在FF中我可以看到父项，但在铬中它是不可见的。但是，如果我正在设置，例如，left:1px给孩子，父母即刻出现。我怎样才能避免这个错误？

Answer 1

你有没有试图使他们的兄弟姐妹，而不是父/子：

.sibling1 { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
.sibling2 { 
 
    position: absolute; 
 
width:100px; 
 
height:100px; 
 
    clip: rect(auto auto auto 100px); 
 
    background: green; 
 
}

<div class="sibling1"></div> 
 
<div class="sibling2"></div>

Answer 2

我想你需要小心你实际在这里做什么。

您正在告诉孩子在所有四边都有0px的绝对位置，我认为这是2个浏览器以不同方式处理它的位置。你告诉孩子需要在每一侧接触，而不必指定它需要的宽度或高度。

铬似乎对待，如果你刚刚给它width: 100%; height: 100%;类似。通过检查元素并查看计算出的样式，我们可以看到这一点，它给了孩子100px的高度和宽度（父母的高度和宽度）。

另一方面，Firefox没有。孩子没有高度或宽度。换句话说，它实际上并不占用屏幕上的任何像素，因此您可以看到父级。

我不认为这是一个错误，而是无效的CSS和您的浏览器尽量显示它。

定位时，可以指定顶部或底部，左侧或右侧，但不是全部。然后给出元素的高度和宽度。

如果你让我知道你正在努力达到什么目标，我会很乐意帮助我尽我所能。

我希望这是有用的。