html - 带有图例的字段集右上 Angular 的位置图标

我无法使以下布局在所有浏览器中看起来都相同:

.wrapper {
  margin-top: 100px;
  position: relative;
  height: 400px;
  width: 400px;
  border: 1px solid black;
}

.icon {
  position: absolute;
  width: 40;
  height: 40px;
  border: 1px solid black;
  background-color: white;
  top: -20px;
  right: 10px;
}

<fieldset class="wrapper">
  <legend>Legendary!</legend>
  <div class="icon">icon</div>
</fieldset>

问题是当 legend 元素存在时，div.icon 在 Firefox 上被拉低了几个像素，在 chrome 上被拉了几个像素。当我删除 legend 元素时，它工作正常，但我不能这样做。关于如何让它在任何地方看起来都一样的任何想法？

最佳答案

在这里你有一个有效的更新:jsfiddle 在 chrome 和 firefox 中测试。
您不需要使用 position:absolute;，您只需 float:right; 您的 div 并提供 margin-top:-40px; 或您想要的任何值。

 #wrapper{
         margin-top: 100px;
         position: relative;
         height: 400px;
         width: 400px;
         border: 1px solid black;
    }

#icon{
 float:right;
    background-color:#fff;
    width:40px;
    height:40px;
    border:1px solid black;
    margin-top:-20px;
    margin-right:20px
}
legend#title {
    margin-left: 20px;
    float: left;
    padding-left: 10px;
    margin-top: -10px;
    background: #f3f5f6;
    width: 74px;
}

关于html - 带有图例的字段集右上 Angular 的位置图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39062940/