在这里总结一下css布局时常见的浏览器兼容性问题
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区域
IE格式下的文本框
chrome格式下的文本框
我们可以发现IE格式下的文本框多了个叉叉,如果想删除该叉叉,可以使用input的伪元素
input::-ms-value { padding: 4px; } input::-ms-clear{ display: none; }
当input的类型为password时,ie和其他浏览器的显示方式不同,ie的表现形式如下
其他浏览器的表现形式如同文本框的正常行驶。我们可以发现ie浏览的密码文本框中出现了“眼睛”,如果想删除该眼睛,可以使用伪元素
input::-ms-reveal { display: none; }
当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; }