css - 带有标签、输入和选择的 IE CSS 格式无表形式

Question

我无法正确格式化 CSS 以按我想要的方式在 IE 中显示。它完美地显示在 Firefox 中。我想让它显示标签，然后在它旁边有对齐的输入框或选择框，它们的大小都相同，所以看起来很均匀。我知道有针对 IE 的黑客攻击，但似乎没有人做出改变。下面是我在 firefox 中使用的示例 CSS 和 html 代码。任何帮助都会很棒谢谢!

*CSS

fieldset {
    border: none;
    padding: 10px;
    width: 600px;
    margin-top: 5px;
}

label {
    width: 140px; 
    padding-left: 20px;
    margin: 5px;
    float: left;
    text-align: left;
}

input {
    margin: 5px;
    padding 0px;
    float: left;
    vertical-align: middle;
    display: inline;
}

select {
    margin: 1px 0px;
    padding: 2px;
    float: left;
    display: inline;
    width: 149px;
}

br {
    clear: left;
}

*HTML

<fieldset>
    <label>First Name:</lable>
    <input type="text" value="first_name" /><br >

    <label>Last Name:</lable>
    <input type="text" value="last_name" /><br >       

    <label>User Role:</lable>
    <select>
        <option value=""></option>
        <option value="admin">Admin</option>
        <option value="basic">Basic</option>
    </select>
 </fieldset>

Answer 1

修复你的 label 标签，然后试试这个 css 代码:

fieldset {
        border: none;
        padding: 10px;
        width: 600px;
        margin-top: 5px;
    }

    label {
        width: 140px; 
        margin: 5px;
        display: block;
        float: left;
    }

    input, select {
        width: 150px;
        margin: 5px;
        float: left;
        display: block;
    }

    br {
        clear: both;
    }

它适用于 IE、FF、Chrome 和 Safari。另外，您可能想尝试使用 ordered lists设置表单元素的样式。