1. 未兼容时,IE7及更早版本的IE浏览器的按钮类元素都会变大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.btn {
padding: 15px 32px;
color: white;
background-color: rgb(72, 189, 91);
border-radius: 4px;
}
</style>
</head>
<body>
<button>按钮</button>
<button class="btn">按钮</button>
</body>
</html>
2. 解决:测量差值,并设置overflow: visible;
PS:overflow: visible;
仅影响宽度,高度则需要另行设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.btn {
padding: 15px 32px;
color: white;
background-color: rgb(72, 189, 91);
border-radius: 4px;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.btn {
padding: 10px 32px;
overflow: visible;
}
</style>
<![endif]-->
</head>
<body>
<button>按钮</button>
<button class="btn">按钮</button>
</body>
</html>