为什么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？

回答

相关问题