ie瀏覽器float兼容性

在最近的項目中，遇到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下面得兼容性問題：

1、並排在一行的兩個div樣式有這種狀況：ie或者ff下對於子div設置float左的時候，若是另外的子div沒有設置float左的話，兩個瀏覽器下會有區別，具體有一個會產生間隙。兼容作法就是都設置float屬性。可是記住有設置過float就要將float clear掉，否則下面的div會疊在已float的div上。我一般把清除浮動寫成單獨的<div class=」clear」></div>放在全部浮動div的最下方。

2、在上述1狀況中須要設置子div的寬度，假如不設置的話子div的寬度會被默認爲母div的100%，這樣float根本就產生不了效果。固然還能夠用display:inline的方法讓兩個子div並排,可是這樣的話div的寬度設置將會失效(要把子div撐大隻能考裏面的元素)。

3、ie中母div被設置成特定高度以後，假如裏面的子div高度(有float的話就以清除float的div的最底爲總高度)超過了母div設置的高度,ie會自動把母div撐大，可是ff卻不能，ff中母div的高度會依然，裏面的子層會溢出到外面來。兼容方法：不要設置母層高度。