css - 为什么 Firefox 对顶部偏移的解释与 Chrome、Safari 和 IE 不同？

Question

举个例子:

这是一个文本区域，有一个背景图像(灰色条)和一个位于文本区域之后的相对定位的 div，带有顶部偏移以将文本移动到位。

标记:

<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>

CSS:

.some_textarea {
  background: transparent url(gray_bar.png) repeat-x 50% 100%;
  width: 99%;
  padding: 5px;
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 13px;
  border: 1px solid #C3C3C3;
}

.message_text {
  display: inline;
  color: #999;
  font-size: 10px;
  position: relative;
  top: -21px;
  padding: 0 6px;
}

问题是 Firefox 是唯一不同意偏移量的浏览器，并导致这种非常小的像素推送烦恼:

这是什么原因造成的？我该如何解决这个问题以保持一致性？如果无法修复，有哪些简单的解决方法？

Answer 1

更新

http://jsfiddle.net/UnsungHero97/maHkr/7/

---

这样的事情怎么样...

http://jsfiddle.net/UnsungHero97/maHkr/2/

我所做的是将您的 textarea/message 组合包装在相对定位的 div 中，然后将消息绝对定位到左下角。您可以使用精确的定位/边距/填充来让它在浏览器中看起来不错。

希望对您有所帮助。
赫里斯托