字段集、宽度、标签、Internet Explorer 错误答案

【问题标题】：Fieldset, Width, Label, Internet Explorer bug字段集、宽度、标签、Internet Explorer 错误
【发布时间】：2012-11-28 19:07:14
【问题描述】：

在此示例中仅 Internet Explorer 9 或 10：http://jsfiddle.net/QQxgg/ 如果我放一个主字段集的宽度，例如655px，文本的标签比正常的大。

在 Firefox 和 Chrome 中，标签大小是自动宽度，所以 行为还可以。是否可以在 Internet Explorer 中指定字段集的宽度和标签自动宽度？谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
fieldset {
width: 655px;
}

fieldset {
    display: table;
}
fieldset p {
    display: table-row;
}
fieldset input, 
fieldset select, 
fieldset label {
    display: table-cell;
    margin: 3px;    
}
fieldset label {
    text-align: right;
}

</style>
</head>
<body>

<fieldset>          
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset> 

</body>
</html>

【问题讨论】：

现在你试试这个jsfiddle.net/QQxgg/2
是的，它有效，但我更喜欢没有宽度尺寸（最小宽度：100px），所以我使用 display:table, display:table-cell, display: table-row

标签： css forms internet-explorer-9 size internet-explorer-10

【解决方案1】：

你想要这样的东西吗？

这是代码，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
fieldset {
width: 500px;
}
fieldset {
    display: inline-block;
}
fieldset input, 
fieldset select, 
fieldset label {
    display: table-cell;
    margin: 3px;    
}
fieldset label {
    text-align: right;
}
</style>
</head>
<body>
<fieldset>          
<label>First Name: </label><input type="text" /><br>
<label>Second Name: </label><input type="text" /><br>
<label>Country: </label><select><option>Choose</option></select><br>
<label>Age: </label><select><option>Choose</option></select>
</fieldset> 
</body>
</html>

【讨论】：

不，我需要相同宽度的标签，所以我使用 display: table ;-)

【解决方案2】：

我的问题已解决，通过将标签强制设置为 1px 并设置 white-space:nowrap; 示例：http://jsfiddle.net/DpGcW/

fieldset label {
text-align: right;
width: 1px;
white-space:nowrap;
}

【讨论】：