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下面得兼容性问题：

一、并排在一行的两个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的高度会依然，里面的子层会溢出到外面来。兼容方法：不要设置母层高度。