Parece que cada navegador agrega algo de relleno mágico codificado dentro de <input type="text">
. Algunos navegadores (IE, Safari, Chrome) hacen que el cuadro de entrada sea un poco más alto, pero se alinean correctamente como si fuera un elemento HTML normal. Puedo vivir con la altura extra. Pero algunos navegadores se portan mal (Firefox y Opera) y también intentan alinear verticalmente el texto o agregar algo de relleno adicional encima. Me sorprende que los navegadores modernos no permitan el diseño de cuadros de texto como si fueran de la misma manera que HTML y añaden algún formato mágico. ¿Estoy haciendo algo mal? ¿Me estoy perdiendo algún truco? ¿Son algunas propiedades CSS exclusivas que podrían ayudarme? Miré brevemente la documentación de Firefox CSS, pero no pude encontrar ninguna. Alternativamente, podría usar HTML editable en lugar de <input type="text">
.Relleno adicional en <input type = "text">
Aquí hay un fragmento que demuestra el problema:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body, input {
font-family: sans-serif;
font-size: 16pt;
color: White; }
#textbox {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
background-color: #A5C9E2;
line-height: 16pt;
padding: 0px;
margin: 0px;
border-width: 0px; }
#box {
position: absolute;
left: 120px;
top: 20px;
width: 100px;
background-color: #AFD66A;
line-height: 16pt; }
</style>
</head>
<body>
<input type="text" id="textbox" value="Hello">
<div id="box">Hello</div>
</body>
</html>
Editar: he experimentado un poco con -moz-outline y -moz-box-sizing en Firefox (si acaso), pero ninguno de sus valores elimina el relleno adicional.
Comience por cerrar su entrada: .... = "Hola" /> – joshcomley
De hecho es válido ya que no está usando XHTML. –
Creo que es válido en HTML 4.01 Transitional, pero seguramente, no es el problema. –