Question

我正在尝试将文本叠加在文本区域中，并在div中使用相同的文本。我设法让它在所有浏览器中工作但FireFox（我使用的是8.0）。在FireFox中，textarea内的文本向左移动1px。

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div, textarea 
{
    position:absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    font-family: Consolas;
    font-size: medium;
    border:none;
    border-width: 0px;
}
div {color:red;}
textarea {color: blue;}
</style></head>

<body>
<textarea>Stuff</textarea>
<div>Stuff</div>

</body>
</html>

Answer 1

我想我可以为此声称最优雅的解决方案。 Firefox不会从文本区域中减去一个像素，而是减去一个半像素。看看这个：

http://jsfiddle.net/e4YGW/19/

在最新版本的Firefox，Chrome，Opera和Safari中测试过。

Answer 2

我建议您首先使用所有浏览器工厂属性的重置，然后应用您的代码。这将大大降低您在各种浏览器中显示差异的可能性。

以下是最着名的重置之一的链接：

http://meyerweb.com/eric/tools/css/reset/

另外，我建议你将textarea和你的div包装在一个容器中，该容器具有完全相同的大小和相对位置。然后对内部元素应用绝对属性。

将文本放在FireFox中的textarea中

2 个答案: