Colocar texto dentro de textarea en FireFox

Estoy tratando de superponer el texto en un área de texto con el mismo texto en un div. Me las he arreglado para hacer que funcione en todos los navegadores pero Firefox (estoy usando el 8.0). En Firefox, el texto dentro del área de texto se desplaza 1px a la izquierda.Colocar texto dentro de textarea en FireFox

Aquí está mi código:

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

Fuente

2011-11-28 ulu

Diría que así es como Firefox representa las áreas de texto, por lo que solo necesitas CSS para Firefox. – Hossein

Esto aparentemente ha sido un problema durante algún tiempo como http://stackoverflow.com/questions/4374537/how-to-force-firefox-to-render-textarea-padding-the-same-as-in-a-div demuestra. Tampoco había una buena solución allí, tampoco. – ScottS

Parece que tendré que volver a buscar en el navegador y luego. Como en los viejos tiempos ... – ulu

Creo que puedo reclamar la solución más elegante para esto. Firefox no resta un píxel del área de texto, pero uno medio píxel. Echar un vistazo a esto:

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

Probado en las últimas versiones de Firefox, Chrome, Opera y Safari.

Fuente

2011-12-01 20:56:24

Se ve bien, pero ¿significa que solo funciona en la primera línea del texto? – ulu

Sí, solo funcionaría en la primera línea. Buena atrapada. Una solución simple, solo usa 'margin-left' en lugar de' text-indent' y estarás bien. Caso de prueba: http://jsfiddle.net/e4YGW/19/ –

le sugiero que utilice primero un restablecimiento de todas las propiedades de fábrica navegador, a continuación, aplicar el código. Esto reducirá considerablemente las posibilidades de que tenga diferencias de visualización en los distintos navegadores.

Aquí hay un enlace de uno de los más famosos de reinicio:

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

También se sugiere que se coloca tanto en el área de texto y el div en un recipiente que tiene el mismo tamaño exacto y la relativa posicionado. Luego aplique propiedades absolutas para los elementos internos.

Fuente

2011-12-01 18:20:03 borisrorsvort

Hecho todo eso, sin suerte. En realidad, agregar line-height: 1 lo echó a perder un poco. – ulu

Colocar texto dentro de textarea en FireFox

Respuesta

Cuestiones relacionadas