Набор полей, ширина, метка, ошибка Internet Explorer

В этом примере только Internet Explorer 9 или 10: http://jsfiddle.net/QQxgg/ если я укажу ширину основного набора полей, например 655 пикселей, метка текста будет больше, чем обычно.

В Firefox и Chrome размер метки соответствует автоматической ширине, поэтому поведение нормальное. Возможно ли указать ширину поля и авто-ширину метки в Internet Explorer? Спасибо.

ie9,10

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

forms css size internet-explorer-9 internet-explorer-10
person FeKuLa    schedule 11.12.2012    source источник
comment
Теперь попробуйте этот jsfiddle.net/QQxgg/2.   -  person Rohit Azad Malik    schedule 11.12.2012
comment
Да, это работает, но я предпочитаю отсутствие размеров ширины (минимальная ширина: 100 пикселей), поэтому я использую display:table, display:table-cell, display: table-row   -  person FeKuLa    schedule 11.12.2012

Ответы (2)


arrow_upward
0
arrow_downward

Вы хотите что-то вроде этого?

то есть изображение для набора полей

вот код,

<!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>
person Lucky    schedule 11.12.2012
comment
Нет, мне нужна та же ширина меток, поэтому я использую display: table ;-) - person FeKuLa; 11.12.2012

arrow_upward
0
arrow_downward

Моя проблема исправлена ​​путем принудительной установки метки в 1 пиксель и установки пробела: теперь rap; Пример: http://jsfiddle.net/DpGcW/

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