【IE7/6/5兼容】解决button类按钮变大的问题

最新推荐文章于 2024-03-04 11:13:55 发布

iuukai

最新推荐文章于 2024-03-04 11:13:55 发布

阅读量364

点赞数

分类专栏： ie 兼容性问题积累

本文链接：https://blog.csdn.net/weixin_45389633/article/details/108014228

版权

ie 兼容性问题积累专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

iuukai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【IE7/6/5兼容】解决button类按钮变大的问题

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,
复制链接

扫一扫

专栏目录