带有图例的字段集右上角的位置图标

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

这里你有一个工作更新：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;
}