前端布局时的浏览器兼容性问题

在这里总结一下css布局时常见的浏览器兼容性问题

1 盒模型

IE6的盒模型和W3C标准的盒模型不同

W3C中的盒模型所定义的宽度和高度为内容区域的宽度和高度 但是盒模型的总大小为margin+border+padding+width

IE的盒模型所定义的宽度和高度为盒模型的总宽度和总高度，width=margin+border+padding+content-width

css3中box-sizing定义了盒模型的类型，其有两个值：centent-box（W3C）和border-box（IE6）

另外，W3C盒模型中div的背景颜色充满了padding和border区域，border透明时，可发现背景颜色就是div的bgcolor（包括border的部分）.（ie6不支持透明transparent）

IE盒模型中的div背景颜色包括padding和border区域

2. input元素默认样式表现形式的不同

文本框

IE格式下的文本框

chrome格式下的文本框

我们可以发现IE格式下的文本框多了个叉叉，如果想删除该叉叉，可以使用input的伪元素

input::-ms-value {
    padding: 4px;
}
input::-ms-clear{
	 display: none; 
}

密码

当input的类型为password时，ie和其他浏览器的显示方式不同，ie的表现形式如下

其他浏览器的表现形式如同文本框的正常行驶。我们可以发现ie浏览的密码文本框中出现了“眼睛”，如果想删除该眼睛，可以使用伪元素

input::-ms-reveal { display: none; }

file

当input中的type值为file时，各浏览器的表现形式不同

如果想使各浏览器下的表现形式相同，需要对该input元素隐藏，然后再改元素下方添加标签。其html写法如下

<div class="input-file">
<input  type="file" name="postImg" value="上传图片" id="upload" class="file-button">
<label class="file-button-img">上传封面</label>
</div>

css布局如下

.input-file{
	display: inline-block;
	height:50px;
	width: 120px;
	/*background-color: #56F06F;*/
	text-align: center;
	cursor: pointer;
	position:relative;
}

.file-button{
	opacity: 0;
	position: absolute;
	left:0;
	top:0;
	width:120px;
	height: 50px;

}

.file-button-img{
	line-height: 50px;
	text-align: center;
	display: inline-block;
	margin-top: 5px;
	color:#fff;
	font-size: 18px;
	width:100%;
	height:100%;
	display: block;
	cursor:pointer;
	background-color: #3EF5B1;
}