为什么 CSS 边框重叠会使边框看起来更粗？

Question

代码： http: //jsfiddle.net/s08nypfd/62/

内块边框重叠，看起来很粗，有解决办法吗？它在 Firefox 和 Chrome 中的呈现方式有所不同。

超文本标记语言

<div class="main_block">
  <div class="block"></div>
</div>

CSS

.main_block{
  width:400px;
  height:100px;
  background:#888;
  border:1px solid black;
}
.block{
  width:100px;
  height:100px;
  border:1px solid red;
}

Answer 1

将margin-*值设置为.block：

.block{
  width:100px;
  height:100px;
  border:1px solid red;
  margin-left: -1px;
  margin-top: -1px;
}

更新了小提琴