Html 绝对定位元素在Opera、FF和Chrome中的外观相同

我有一个小模板，显示一个文本区域和一个闭合块

我使用Chrome进行开发，但在其他浏览器中它看起来不同。 关闭按钮会更改其在FF和Opera中的位置。

<div class="video-box">
    <textarea id="id_video" rows="10" cols="40" name="video" placeholder="Embed your video here." class="has-     placeholder" style="display: inline-block;"></textarea>
    <div class="close" style="display: block;">close</div>
</div>

什么会导致此问题？

---

所有这些浏览器都有不同的HTML呈现引擎，因此一些小的更改是不可避免的。几乎不可能在每个浏览器中都让所有内容看起来完全相同；我甚至不会尝试。

尝试从右侧和底部定位：

.close {
  position: absolute;
  right: 0;
  bottom: 4px;
  /* etc. */
}

---

有几件事需要改变

首先设置字体大小：0；在.video框上，因为它是内联块，所以可以在元素后添加额外的空白：

.video-box {
    position: absolute;
    margin-top: 25px;
    font-size: 0;
}

接下来，设置边距：0；在文本区域上，重置浏览器添加到元素的默认边距：

textarea {
    width: 256px;
    border: 1px solid #C7C6C6;
    height: 100px;
    resize: none;
    margin: 0;
}

最后，使用bottom:0；右：0；而不是顶部和左侧打开。关闭，因为它将确保按钮位于容器的右下角，无论其大小：

.close {
    position: absolute;
    font-family: Arial, Verdana, sans-serif;
    bottom: 0;
    right: 0;
    z-index: 10;
    font-size: 8px;
    cursor: pointer;
    background: white;
    border: 1px solid #808080;
    padding-top: 1px;
    padding-left: 1px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

---

隐藏霍布斯的解决方案是/曾经是最接近的，但Firefox可能仍然会错误地对待它-至少在我的情况下，因为我看到它将.close按钮放低了1px

所以，检查这个解决方案。至少还有一个：）我将.close按钮上的字体大小更改为30px，只是为了更好地看到差异

@-moz-document url-prefix() {
    .close {
        margin-bottom: 1px !important; /* !important may be omitted */
    }
}

.video-box {
    position: absolute;
    margin-top: 25px;
    font-size: 0px;
}

textarea {
    width: 256px;
    border: 1px solid #C7C6C6;
    height: 100px;
    resize: none;
}

.close {
    position: absolute;
    font-family: Arial, Verdana, sans-serif;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    font-size: 30px;
    cursor: pointer;
    background: white;
    border: 1px solid #808080;
    padding-top: 1px;
    padding-left: 1px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.close:hover {
    background: grey;
}

---

检查工作状态

给出一些差异的屏幕截图。如果有细微差别，请考虑这种方法：将视频框类的位置更改为相对位置，然后可以定位。browsers@Feanor，我们的回答是否回答了您的问题？谢谢您已关闭，但您的解决方案未正确显示/放置.close按钮。检查我的解决方案。按钮以何种方式显示不正确？我已经检查了Opera、FF、Chrome和IE中的小提琴，它看起来很好，并且定位在同一个位置。Firefox（v30）显示的

.close

按钮比外框低1px。尤其是使用小字体时，它看起来很难看。我知道这很奇怪。不管怎样，+1表示

字体大小：0提示
：）奇怪，我使用的是FF v30，我们的两个小提琴看起来都一样（减去按钮上较大的文字），这是个谜！
@-moz-document url-prefix() {
    .close {
        margin-bottom: 1px !important; /* !important may be omitted */
    }
}

.video-box {
    position: absolute;
    margin-top: 25px;
    font-size: 0px;
}

textarea {
    width: 256px;
    border: 1px solid #C7C6C6;
    height: 100px;
    resize: none;
}

.close {
    position: absolute;
    font-family: Arial, Verdana, sans-serif;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    font-size: 30px;
    cursor: pointer;
    background: white;
    border: 1px solid #808080;
    padding-top: 1px;
    padding-left: 1px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.close:hover {
    background: grey;
}