将图标放置在带有图例的字段集的右上角

Question

我很难在所有浏览器中使以下布局看起来相同：

.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元素时，它运行良好，但我不能这样做。关于如何让它在任何地方看起来都一样，有什么想法吗？

Answer 1

这里有一个在chrome和firefox中测试的工作更新：jsfiddle。您不需要使用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;
}

Answer 2

 .icon {
           float: right;
           margin-top: -30px;
            width: 40px;
            height: 40px;
            border: 1px solid black;
            background-color: white;

        } 

在铬和mozilla上进行了测试。

Answer 3

尝试以百分比%给出top值。

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

Fiddle here：https://jsfiddle.net/37y8023g/

Answer 4

将line-height用于.icon

CSS：

.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;
    line-height: 40px;
}

工作示例：https://jsfiddle.net/qjqv43y4/1/