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

为什么

.discount edg

容器未与my

字段集的右上角对齐？如果我删除
，它会工作。为什么Chrome和Firefox显示不同


正文{
利润率：100像素；
}
字段集{
边框：1px实心#E67E22；
宽度：300px；
高度：200px；
填充：.625rem；
位置：相对位置；
}
字段集图例{
字体大小：14px；
字号：700；
文本转换：大写；
利润率：0px 10px；
填充：0px 10px；
}
字段集。折扣edg{
文本对齐：居中；
颜色：#FFF；
位置：绝对位置；
排名：0；
右：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 50px 50px 0；
边框颜色：透明#ff0000透明；
}
字段集.折扣边值{
位置：绝对位置；
顶部：10px；
左：16px；
空白：nowrap；
字号：700；
变换：旋转（45度）；
}

带有包装的长文本的Testlegend
- 50%
折扣边与字段集的顶部对齐，只是字段集的顶部边框始终贯穿图例的中间

:

字段集元素的渲染图例（如果有）预计将作为块框在字段集元素的块开始边界边缘上渲染（覆盖任何显式显示值）。如果没有明确的内联尺寸，框应收缩包装。如果所讨论的图例元素具有align属性，且其值与下表第一列中的一个字符串的ASCII不区分大小写匹配，然后，图例将在第二列中同一行的相应单元格中给定的位置上沿边框边缘的内联方向对齐

firefox和chrome的区别在于

我会改为使用divs，因为对组表单控件以外的任何控件使用字段集在语义上都是不正确的


正文{
利润率：100像素；
}
.字段集{
边框：1px实心#E67E22；
宽度：300px；
高度：200px；
填充：.625rem；
位置：相对位置；
}
.fieldset.legend{
字体大小：14px；
字号：700；
文本转换：大写；
利润率：0px 60px 0 10px；
填充：0px 10px；
位置：绝对位置；
背景：白色；
排名：0；
转化：translateY（-50%）；
}
.字段集.折扣edg{
文本对齐：居中；
颜色：#FFF；
位置：绝对位置；
排名：0；
右：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 50px 50px 0；
边框颜色：透明#ff0000透明；
}
.字段集.折扣边值{
位置：绝对位置；
顶部：10px；
左：16px；
空白：nowrap；
字号：700；
变换：旋转（45度）；
}

使用包装的长文本测试图例
- 50%



一行
- 50%
fieldset.discount edg{top:-1em}，因为存在图例元素并推送它down@VXp这似乎解决了Firefox中的问题，但在Chrome中却没有。对于Chrome来说，情况正好相反：正1图例容器只是一个块元素。为什么它会影响绝对定位元素？因为它会影响封地集上边框的位置-对于图例和字段集，字段集上边框始终穿过图例的中间。如果它不是一个表单，就使用div。我想说，使用它对非表单元素进行分组在语义上无论如何都是不正确的