абсолютный div внутри поля с легендой

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

Край скидки совпадает с вершиной набора полей, просто верхняя граница набора полей всегда проходит через середину легенды.

От w3.org :

Предполагается, что визуализированная легенда элемента fieldset будет отображаться поверх границы начала блока элемента fieldset как блок-блок (переопределяя любое явное значение отображения).При отсутствии явного встроенного размера поле должно быть сжато.Если рассматриваемый элемент легенды имеет атрибут выравнивания, и его значение является ASCII-нечувствительным к регистру совпадением для одной из строк в первом столбце следующей таблицы, тогда легенда должна быть выровнена выровненной в линейном направлении надкрай границы в позиции, указанной в соответствующей ячейке в той же строке во втором столбце.

Разница между firefox и chrome составляет , вызванная ошибкой в ​​способе, которым webkit обрабатывает свернутые поля дляfieldsets

Я бы использовал div, поскольку использование fieldsets для всего, кроме элементов управления формы группы, в любом случае семантически неверно.

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>