Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css中border:0和border:none的区别详解

css中border:0和border:none的区别详解

发布时间:2020-05-12   编辑:www.jquerycn.cn
jquery中文网为您提供css中border:0和border:none的区别详解等资源,欢迎您收藏本站,我们将为您提供最新的css中border:0和border:none的区别详解资源
今天发现border:none在ie6下还是有边框,而改成border:0之后边框就没有了,这让我想起腾讯曾经的笔试题中有道问答题问到这两个的区别的,以前居然没有重视,又总结一条。下面就讲解一下这两个的区别


性能差异:

【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。

【border:none;】把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

兼容性差异:

兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在,如下

代码

 代码如下 复制代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>borderl:none;与border:0;的区别</title>
<style type="text/css">
input,button{border:none;}
</style>
</head>

<body>

<h3>&lt;button&gt;</h3>
<button type="button">button</button>

<h3>&lt;input&gt;</h3>
<input name="" type="button" value="input button" />

<br /><br />
<input name="" type="text" value="input text" />

</body>
</html>

效果

 


注意在firebug中border:none和border:0的区别


下面举个例子来具体说明下

 代码如下 复制代码


<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}
div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}
</style>


<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>
<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

有兴趣的朋友可以复制以上代码在这个浏览器试一试:

测试结果:
1、.zerotest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(IE7会显示3像素的边框,这跟border:0解析有关。)
2、.zerotest .setstyle
虽然定义了border-style: dashed,但是border-width:0 所以无边框
3、.nonetest .setwidth
虽然定义了border-width:3px,但是border-style:none 所以无边框(IE7下无边框)
4、.nonetest .setstyle
定义了border-style:dashed border-style为默认值medium border-color为默认值black 所以会显示3像素黑色的虚线框(IE7下为一像素)

综合1、4可以分析出在ie6、IE7下:
border:0 被解析为 border-width:0
border:none 被解析为 border-style:none

再来看看标准浏览器


border:0 比 border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高。border:none;被理解为关闭此标签,设置为0,虽然不显示,但是同样占内存。

为了少渲染border-width:0,和不占用内存,这里我们写一个兼容所有浏览器的最优写法:

border:0 none;前面的0是针对ie6和ie7的兼容,后面的none是针对标准浏览器的。

测试了下border:0 none;和border:none 0;ie6和ie7效果一致,至于渲染的和占用内存情况的利弊分析,有待进一步的分析测试,推荐用前者。


总结:

对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能说是理论上。

如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可,如下例Demo3:

 代码如下 复制代码

<style type="text/css">
input,button{border:none;background:none;}
</style>

<h3>button</h3>
<button type="button">button</button>

<h3>input</h3>
<input name="" type="button" value="input button" />

<br /><br />
<input name="" type="text" value="input text" />

对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。

您可能感兴趣的文章:
css中border:0和border:none的区别详解
firmware-mod-kit工具安装和使用说明
常用的<meta>代码整理汇总
关于移动端H5页面中1px边框的解决方法
边框(border)边距(margin)和间隙(padding)属性的区别
解决H5网页中用video标签无法播放MP4视频的方法
javascript同页面多次调用弹出层代码
php如何实现批量删除数据
CSS控制文字的显示与隐藏引出的BUG
css动画制作——CSS animate

[关闭]