文本框內的位置文本在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

回答

相關問題