¿Por qué 150 + 150 no es igual a 300 en los navegadores?

StackOverflow https://stackoverflow.com/questions/413653

  •  03-07-2019
  •  | 
  •  

Pregunta

Tengo el siguiente HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

Cuando se representan, la segunda fila de cuadros de texto parece ser acumulativamente más larga que la 1 en la primera fila. Esto a pesar de la configuración explícita de anchos a través del atributo de estilo

¿Por qué sucede esto y puedo evitarlo?

Nota: esto parece funcionar igual en FF3 e IE7

¿Fue útil?

Solución

jhunter es correcto, y agregaría que necesitas Firebug para Firefox (es gratis). Podrías haberte imaginado esto rápidamente con eso instalado. Inspeccione el elemento en el que está interesado y observe el " diseño " pestaña.

Otros consejos

Hay un borde en un cuadro de texto que no está incluido en el ancho.

De hecho, el ancho de tus cuadros es +2 como borde tanto a la izquierda como a la derecha (que son 1px) significa que hay 2 píxeles adicionales por cuadro. Así que en total eres +6.

Le sugeriría que leyera el dominio de CSS, explica muchas de las diferencias con los diferentes modelos de cuadro de navegador y cómo afectan el diseño y el ancho en diferentes navegadores.

Dominio de CSS

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top