兼容: 通过代码实线各浏览器表现一致性
1.IE8下图片边框问题
<a><img src="./a/1.jpg"></a>
解决办法:
img {
border:0; //去掉ie8下图片边框
display:block;
or vertical-align:middle; 取消下间隙
}
2.图片下间隙
解决: (1) 图片转换块元素
(2)font-size:0;line-height:0;给父元素加
(3) 垂直对齐 vertical-align:middle;
3.文本框和提交按钮对不齐现象
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;height: 400px;
border:6px double deeppink;
}
/* 文本框 */
input:first-of-type {
float: left;
margin-top: 30px;
height: 48px;
border:1px solid #000;
}
/* 按钮 */
input:last-of-type {
float: left;
margin-top: 30px;
height: 50px;
border:0;
background-color: aqua;
width: 50px;
}
/*
1: 不用普通按钮 用a元素模拟按钮 js提交
2:给按钮外边套一个div
*/
</style>
</head>
<body>
<div class="box">
<form action="">
<!-- 盒模型的高度= height+border*2+padding*2 56-->
<input type="text">
<!-- 设置的高度包含了盒模型的边框+内边距 = 50px
盒模型的高度= height 50
-->
<input type="submit" value="提交">
<!-- <a href="#">提交</a> -->
</form>
</div>
</body>
</html>
4. IE6下小高度问题
div {
line-height:0;
font-size:0;
}