爲什麼IE尊重標籤CSS寬度，但不支持Firefox或Chrome？

我試圖寫一個聯繫表格，但是我的標籤寬度並沒有被強制在Firefox或Chrome中 - 雖然IE（IE瀏覽器）似乎工作正常。這裏是我的HTML爲什麼IE尊重標籤CSS寬度，但不支持Firefox或Chrome？

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

，這裏是我的CSS

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

任何想法如何，我可以強制標籤寬度，他們似乎崩潰

來源

2011-06-18 Mark Sandman

在FF 4.0.1：http://jsfiddle.net/fy3NC/ –

看起來不錯，並在Chrome的工作與Nikita的粘貼代碼。 – 2ndkauboy

@Nikita - 同意。對我來說，Firefox 3.6看起來很好。 – Spudley

試試這個：

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

看到這個運行（http://jsfiddle.net/jrpab/），它在Chrome中工作正常。

來源

2011-06-18 13:59:27 Roman

嘗試：

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

來源

2011-06-18 13:56:27 hakre

只是第一行，尤其是'clear：left'幫助我的標記（標籤和輸入位於fieldset內部 - 沒有div） – ruruskyi

一些頭部劃傷和研究之後，我發現這是因爲標籤內聯元素，它根據CSS文件應該忽略寬度造型。所以，像往常一樣，IE瀏覽器做得不對，Chrome和Firefox做得很對。

...

將其顯示屬性設置爲內聯以外的內容。我發現顯示：內嵌塊是實現您的目標的最佳選擇。

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

來源

2016-05-12 10:17:17

爲什麼IE尊重標籤CSS寬度，但不支持Firefox或Chrome？

回答

相關問題