Question

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

HTML

<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;
}

Updated Fiddle

Answer 2

你需要玩box-sizing属性。如果您将somwhere设置为负边距，则只要更改边框厚度，设计就会崩溃。

你也可以使用一个小技巧来设置main_block - 设置border: none并设置插入框阴影而不是边框。

你需要设置box-sizing for block（在chrome和FF中效果很好）：

＆＃13;

.main_block{
  width:400px;
  height:100px;
  background:#888;
  border: none;
  box-shadow: 0 0 0 1px black inset;
}
.block{
  width:100px;
  height:100px;
  border:1px solid red;
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

Answer 3

如果您希望内边框覆盖父元素的边框，请使用以下设置：

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

默认情况下，位置是里面父级的边框。上面的设置将其移动到父级的边框（向上和向左一个像素），从而覆盖它。

以下是包含此内容的片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: