Question

为什么.discount-edg容器未对准我的fieldset的右上角？如果我删除了<legend>，它将起作用。为什么Chrome和Firefox显示不同？

body {
  margin: 100px;
}

fieldset {
  border: 1px solid #E67E22;
  width: 300px;
  height: 200px;
  padding: .625rem;
  position: relative;
}
fieldset legend {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0px 10px;
  padding: 0px 10px;
}
fieldset .discount-edg {
  text-align: center;
  color: #FFF;
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #ff0000 transparent transparent;
}
fieldset .discount-edg .value {
  position: absolute;
  top: 10px;
  left: 16px;
  white-space: nowrap;
  font-weight: 700;
  transform: rotate(45deg);
}

<fieldset>
  <legend>Testlegend with long text that wraps</legend>
  <div class="discount-edg"><div class="value">- 50%</div></div>
</fieldset>

Answer 1

折扣边确实与字段集的顶部对齐，只是字段集的顶部边框始终穿过图例的中间。

From w3.org：

fieldset元素的渲染图例（如果有的话）应该作为块框（覆盖任何显式显示值）在fieldset元素的块起始边框边缘进行渲染。如果没有明确的内联大小，则该框应收缩包装。如果所讨论的图例元素具有align属性，并且其值是下表第一列中的一个字符串的ASCII大小写不敏感匹配项，则预计图例将沿内联方向呈行对齐。在第二列同一行的相应单元格中给定位置的边界边缘。

firefox和chrome之间的区别是caused by a bug in the way webkit handles collapsed margins for fieldsets

我会改变使用div，因为除了组窗体控件之外，将fieldset用于其他任何东西在语义上都是不正确的。

body {
  margin: 100px;
}

.fieldset {
  border: 1px solid #E67E22;
  width: 300px;
  height: 200px;
  padding: .625rem;
  position: relative;
}
.fieldset .legend {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0px 60px 0 10px;
  padding: 0px 10px;
  position:absolute;
  background:white;
  top:0;
  transform: translateY(-50%);
}
.fieldset .discount-edg {
  text-align: center;
  color: #FFF;
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #ff0000 transparent transparent;
}
.fieldset .discount-edg .value {
  position: absolute;
  top: 10px;
  left: 16px;
  white-space: nowrap;
  font-weight: 700;
  transform: rotate(45deg);
}

<div class="fieldset">
  <div class="legend">Test legend with long text that wraps</div>
  <div class="discount-edg"><div class="value">- 50%</div></div>
</div><br><br>
<div class="fieldset">
  <div class="legend">One line</div>
  <div class="discount-edg"><div class="value">- 50%</div></div>
</div>

带图例的字段集内的绝对div

1 个答案: