文本框内的位置文本在FireFox

我想叠加在一个文本中的同一文本在文本中的文本。我已经设法使其在所有浏览器中都能正常工作，但FireFox（我使用的是8.0）。在FireFox中，textarea内部的文本左移了1px。文本框内的位置文本在FireFox

这里是我的代码：

<!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>

来源

2011-11-28 ulu

我想说这是Firefox呈现textareas的方式，所以你只需要Firefox的特殊CSS。 – Hossein

这显然是一段时间的问题，因为http://stackoverflow.com/questions/4374537/how-to-force-firefox-to-render-textarea-padding-the-same-as-in-a-div演示。在那里没有真正的解决方案。 – ScottS

看起来我必须恢复浏览器嗅探。就像在过去的美好时光一样.. – ulu

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

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

在火狐，Chrome，Opera和Safari浏览器的最新版本进行测试。

来源

2011-12-01 20:56:24

看起来不错，但这是否意味着它只能在文本的第一行？ – ulu

是的，它只会在第一行工作。接得好。简单的修复，只需使用'margin-left'而不是'text-indent'，你会很好。测试用例：http://jsfiddle.net/e4YGW/19/ –

我建议你先使用所有的浏览器工厂属性的复位，然后应用代码。这将大大降低您在各种浏览器中出现显示差异的几率。

这里是最有名的复位之一的链接：

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

此外，我建议你换你都textarea的，并在具有完全相同的尺寸和定位相对容器的股利。然后为内部元素应用绝对属性。

来源

2011-12-01 18:20:03 borisrorsvort

完成了所有这些，没有运气。实际上，增加line-height：1会使它变得有点破坏。 – ulu

文本框内的位置文本在FireFox

回答

相关问题