html - 绝对定位元素在 Opera、FF 和 Chrome 中看起来相同

Question

我有一个显示文本区域和关闭 block 的小模板。

我是用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>

CSS:

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

textarea {
    width: 256px;
    border: 1px solid #C7C6C6;
    height: 100px;
    resize: none;
}
.close {
    position: absolute;
    font-family: Arial, Verdana, sans-serif;
    top: 94px;
    left: 222px;
    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;
}

什么会导致这个问题？

http://jsfiddle.net/3hTH2/

Answer 1

有几件事需要改变。

首先设置font-size: 0;在 .video-box 上，因为它是行内 block ，所以可以在元素后添加额外的空格:

.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 上的 top 和 left，因为它将确保按钮位于容器的右下角，无论它是什么尺寸:

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

http://jsfiddle.net/FVP6T/