Dlaczego IE szanuje szerokość CSS etykiety, ale nie Firefox czy Chrome?

Question

Próbuję napisać formularz kontaktowy, ale moje szerokości etykiet nie są wymuszane w przeglądarce Firefox lub Chrome - IE wydaje się działać w porządku (choć raz). Tu jest mój 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> 

i tu jest mój CSS

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

jakieś pomysły w jaki sposób można wymusić szerokość etykiety, wydają się zwinąć

Answer 1

Wypróbuj :

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

Zobacz to działa (http://jsfiddle.net/jrpab/), działa dobrze w Chrome.

Answer 2

try:

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

Answer 3

Po pewnym drapania głowy i badań, znalazłem to dlatego etykiety są elementy wbudowane, które według dokumentacji CSS powinien zignorować szerokość stylizacji. Więc, jak zwykle, IE robi to źle i Chrome i Firefox robią to dobrze.

...

Ustaw właściwość wyświetlania na coś innego niż wbudowane. Znalazłem wyświetlacz : blok inline jest najlepszy do osiągnięcia tego, co masz zamiar.

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