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

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

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

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;
            }  

在这里小提琴： https ： //jsfiddle.net/37y8023g/

Answer 4

使用.icon line-height

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/