负边距和边框

Question

我有一些图像要使用负边距进行堆叠。然而，由于没有明确定义边界的堆叠图像在视觉上会造成混淆，我想我应该在它们周围添加一个边界。奇怪的是，即使图像堆叠正确，它们的边框最终还是在前一个元素的下方。

为什么会出现这种情况，有没有办法让边框以直观的方式显示？

#second {
  margin-top: -50px;
  margin-left: 20px;
}

img {
  border: 5px ridge green;
  display: block;
}

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

编辑：在 Firefox 上，它是这样的：

Answer 1

此问题未出现在 Chrome 中，但出现在 Firefox 和 IE 中。简单的解决方案似乎只是做一些事情，比如将图像的位置设置为相对的：

#second {
  margin-top: -50px;
  margin-left: 20px;
}

img {
  border: 5px ridge green;
  display: block;
  position: relative;
}

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

Answer 2

您也可以在 FF 中使用变换强制绘制边框：

#second {
  margin-top: -50px;
  margin-left: 20px;
}

img {
  border: 5px ridge green;
  display: block;
  }

/* FF debug*/
div + div img {
  transform:scale(1);/* transform + anyvalue that does nothing new forces the layout to be redrawn */
}
div {float:left;
  margin:1em;

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

负边距和边框

Negative margins and borders

css

margin

cross-browser