Question

我有这样的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

你有没有试过让他们成为兄弟姐妹而不是父母/孩子：

＆＃13;

<key>aps-environment</key>
<string>production</string>

＆＃13;

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

＆＃13;

Answer 2

我认为你需要注意你在这里真正要做的事情。

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

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

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

我不认为这是一个错误，而是无效的css，您的浏览器会尽力展示它。

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

如果你让我知道你想要达到的目标，我会乐意尽力帮助你。

我希望这很有用。

嵌套div上的css剪辑的Chrome bug

2 个答案: