html - <input> 在 Chrome 中彼此齐平，但在 FireFox 中不是

Question

我目前正在尝试制作三个宽度相同且彼此齐平的输入框。输入是三种不同的类型，textarea input & select。我在 Google Chrome 中很成功，但在 Firefox 中却完全乱套了。我在 Stack Overflow 和互联网上进行了搜索，但没有找到很好的解释。

这是我的 HTML...

<div id='add-topic-wrap'>
    <h3 id='topic-wrap-title'>Add a new Topic</h3>
    <div class='topic-input-wrap'>
        <label>Topic: </label>
        <input id='topic-input' type='text' ng-model='dashControl.topic.title' maxlength='30'></input>
    </div>
    <div class='topic-input-wrap'>
        <label>Description: </label>
        <textarea id='desc-input' ng-model='dashControl.topic.desc'></textarea>
    </div>
    <div class='topic-input-wrap'>
        <label>Category: </label>
        <select id='category-input' ng-model='dashControl.topic.category'>
            <option>HTML5</option>
            <option>CSS3</option>
            <option>Javascript</option>
            <option>PostgreSQL</option>
            <option>Django</option>
        </select><br>
    </div>
    <button id='submit-topic' ng-click='dashControl.addTopic(dashControl.logged_in_user)'>Submit</button>
</div>

这是我的 CSS...

#add-topic-wrap{
    border: solid black .1em;
    width: 95%;
    margin: 1em auto 0 auto;
}

#topic-wrap-title{
    font-family: 'Raleway';
    text-align: center;
    margin: 0.5em 0;
}

.topic-input-wrap{
    height: 3em;
    margin-left: .5em;
}

.topic-input-wrap{
    font-family: 'Raleway';
    height: 3em;
}

#topic-input, #desc-input, #category-input{
    float: right;
    margin-right: .5em;
}

#desc-input{
    width: 12.5em;
}

#category-input{
    width: 13em;
    height: 1.6em;
}

#submit-topic{
    margin: 0 0 1em 6.5em;
    height: 1.5em;
    font-size: 1em;
    font-family: 'Raleway';
    background-color: transparent;
    border: black solid .1em;
}

左侧为 Google Chrome 屏幕截图，右侧为 Firefox...

Answer 1

原因是您使用的是 em，这在某些浏览器中有点无情。如果您不支持 ie8，请尝试 rems。如果是，请使用 % 或 px。

也可以使用:

box-sizing: border-box;

确保它们完全对齐。

快速 fiddle : https://jsfiddle.net/eq54Lm5d/1/

此外，您正在使用 id 进行样式设置，您真的应该使用类进行样式设置以获得更好的特异性行为。