Question

我有一个显示textarea和close块的小模板。

我使用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上，因为它是内联块的额外空格可以在元素之后添加：

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

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

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

最后，使用bottom：0;和右：0;而不是顶部和左侧.close，因为它将确保按钮位于容器的右下方，无论它的大小是多少：

.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/

Answer 2

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

Answer 3

尝试从右侧和底部进行定位：

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

Answer 4

Hidden Hobbes的解决方案是最接近的，但它可能仍然被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;
}

检查工作fiddle

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

4 个答案: