在最近的項目中，遇到label、input、和button顯示同一行，需求如下
實現代碼，框架為react.js
<label class="formGrid__label required_title" style={{ marginLeft: "-120px", width: "90px", paddingLeft: "10px" }} for="checkValue">手機驗證碼</label>
<input class="input formGrid__input" id="checkValue" style={{ width: "55%", float: "left" }} placeholder="請輸入動態驗證碼" type="input"
$input={function () {
inputChange && inputChange({
checkValue: $(this).val()
});
}} $blur={function () {
props.logincontentInputBlur && props.logincontentInputBlur({ title: "checkValue", flag: true });
}} /> react事件，獲取輸入框的值
<button disabled={props.disable} style={{float: "left", backgroundColor: props.disable === false ? "#4aa038" : "#bebebe", color: "#ffffff", maxWidth: "120px", marginRight: "-120px", height: "33px", marginBottom: "-60px", marginLeft: "19px", borderRadius: "4px", border: "0" }} $click={function () {
props.GetCheckValue && props.GetCheckValue({account:props.phone,accountType:props.userType}); //props.logincontentInputBlur && props.logincontentInputBlur();
}}>{props.bottomText}</button>
這里主要說float，一開始，我在input里面設置了float：left，button里面沒有用float設置浮動，在火狐，chrome中，button和input都能並排顯示，但是ie不行，會跳到下一行顯示，經過查資料，這是ie下面float的兼容性問題，（在ie瀏覽器下面，需要同一行顯示的元素或者div必須均使用float設置浮動，才能實現並排顯示）
下面總結三點關於float在ie下面得兼容性問題：
一、並排在一行的兩個div樣式有這種情況：ie或者ff下對於子div設置float左的時候，如果另外的子div沒有設置float左的話，兩個瀏覽器下會有區別，具體有一個會產生間隙。兼容做法就是都設置float屬性。但是記住有設置過float就要將float clear掉，不然下面的div會疊在已float的div上。我通常把清除浮動寫成單獨的<div class=”clear”></div>放在所有浮動div的最下方。
二、在上述1情況中需要設置子div的寬度，假如不設置的話子div的寬度會被默認為母div的100%，這樣float根本就產生不了效果。當然還可以用display:inline的方法讓兩個子div並排,但是這樣的話div的寬度設置將會失效(要把子div撐大只能考里面的元素)。
三、ie中母div被設置成特定高度之后，假如里面的子div高度(有float的話就以清除float的div的最底為總高度)超過了母div設置的高度,ie會自動把母div撐大，但是ff卻不能，ff中母div的高度會依然，里面的子層會溢出到外面來。兼容方法：不要設置母層高度。