¿Por qué IE respeta el ancho de CSS de la etiqueta, pero no Firefox o Chrome?

Question

Estoy tratando de escribir un formulario de contacto; sin embargo, mis anchos de etiqueta no están siendo forzados en Firefox o Chrome - IE parece estar funcionando bien (por una vez). Aquí está mi HTML

<form name="" id="" action="" method="post"> 

      <div id="my_form"> 

       <div> 
        <label for="username">Username:</label> 
        <input type="text" name="username" id="username" /> 
       </div> 
      <div> 
<form> 

y aquí está mi CSS

#my_form div label{width:200px;display:inline-block;} 

alguna idea de cómo puedo forzar el ancho de la etiqueta, que parecen colapsar

Answer 1

probar este :

#my_form div label{width:200px; display:block; float:left;} 

Ver este funcionamiento (http://jsfiddle.net/jrpab/), funciona bien en Chrome.

Answer 2

intento:

#my_form label{width:200px;display:block; clear:left; float:left; } 
#my_form input{display:block; float:left; width:auto;} 

Answer 3

Después de algún rascarse la cabeza y la investigación, he encontrado que es porque etiquetas son elementos en línea, que según la documentación CSS debe ignorar el estilo ancho. Entonces, como de costumbre, IE lo está haciendo mal y Chrome y Firefox lo están haciendo bien.

...

establezca su propiedad pantalla para algo que no sea en línea. He encontrado pantalla: bloque en línea es el mejor para lograr lo que está buscando.

http://doctype.com/firefox-chrome-ignore-widths-my-labels