border:none与border:0的区别

最新推荐文章于 2023-05-18 14:59:23 发布

鬼眼邪神

最新推荐文章于 2023-05-18 14:59:23 发布

阅读量6.5k

点赞数 2

分类专栏：浏览器兼容文章标签： javascript border

本文链接：https://blog.csdn.net/u010200222/article/details/45622647

版权

浏览器兼容专栏收录该内容

13 篇文章 0 订阅

订阅专栏

border:none与border:0的区别主要有两点：（1）性能上的差异。（2）浏览器兼容差异。

1.性能上的差异

（1）border:0。将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。

（2）border:none。将border设置成none，浏览器就不会做出渲染动作。

2.兼容性差异

在IE6和IE7中，将border设成0和将border设成none对于input标签和button标签是不一样的。

（1）将border设成0，对于所有的浏览器效果都一样。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<meta name="author" content="鬼眼邪神"/>
		<style>
			input,button {
				border:0;
			}
		</style>
	</head>

	<body>
		<input type="button" name="" value="按钮1"/>
		<button type="button">按钮2</button>
	</body>
</html>

显示效果如下所示：

（2）将border设成none。在IE6、7中无效，在其它浏览器中有效。代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<meta name="author" content="鬼眼邪神"/>
		<style>
			input,button {
				border:none;
			}
		</style>
	</head>

	<body>
		<input type="button" name="" value="按钮1"/>
		<button type="button">按钮2</button>
	</body>
</html>

在IE6、7中的显示效果：