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

性能差异：

【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;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。

时间： 2024-11-10 07:05:25

css中border:0和border:none的区别详解的相关文章

CSS中HTML元素定位Position参数可选值详解

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 语法: position : static | absolute | fixed | relative 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" static 元

JavaScript中的this,call,apply使用及区别详解_基础知识

学习起因: 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛.遂专门花了一天,来弄懂JavaScript的this,call,apply. 中途参考的书籍也很多,以<JavaScript设计模式与开发实践>为主,<JavaScript高级程序设计>.<你不知道的JavaScript>为辅.这三本书对我理解this,call,apply都起了很大的帮助. this 首先,我们先讲述this. 在<Java

Java中Hashtable类与HashMap类的区别详解_java

Hashtable类 Hashtable继承Map接口,实现一个key-value映射的哈希表.任何非空(non-null)的对象都可作为key或者value. 添加数据使用put(key, value),取出数据使用get(key),这两个基本操作的时间开销为常数. Hashtable通过initial capacity和load factor两个参数调整性能.通常缺省的load factor 0.75较好地实现了时间和空间的均衡.增大load factor可以节省空间但相应的查找时间将增大,

SQL SERVER中强制类型转换cast和convert的区别详解_MsSql

SQL SERVER中强制类型转换cast和convert的区别 在SQL SERVER中,cast和convert函数都可用于类型转换,其功能是相同的, 只是语法不同. cast一般更容易使用,convert的优点是可以格式化日期和数值. select CAST('123' as int) -- 123 select CONVERT(int, '123') -- 123 select CAST(123.4 as int) -- 123 select CONVERT(int, 123.4) --

JavaScript中函数声明与函数表达式的区别详解_javascript技巧

前言 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略.下面看看这两者的详细区别介绍. 什么是 Function Declaration(函数声明)? Function Declaration 可以定义命名的函数变量,而无需给变量赋值.Function Declaration 是一种独立的结构,不能

linux中cat、more、less命令区别详解

众所周知linux中命令cat.more.less均可用来查看文件内容,主要区别有:cat是一次性显示整个文件的内容,还可以将多个文件连接起来显示,它常与重定向符号配合使用,适用于文件内容少的情况:more和less一般用于显示文件内容超过一屏的内容,并且提供翻页的功能.more比cat强大,提供分页显示的功能,less比more更强大,提供翻页,跳转,查找等命令.而且more和less都支持:用空格显示下一页,按键b显示上一页.下面详细介绍这3个命令. cat   [plain] view p

android中Intent传值与Bundle传值的区别详解_Android

举个例子我现在要从A界面跳转到B界面或者C界面   这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两遍添加值的方法 那么 如果我用1个Bundle  直接把值先存里边 然后再存到Intent中 不就更简洁吗? 另外一个例子如果我现在有Activity A ,B ,C:现在我要把值通过A经过B传给C你怎么传 如果用Intent的话 A-B先写一遍 再在B中都取出来 然后在把值塞到Intent中 再跳到C 累吗?如果我在A中用了 Bundle 的话  我把Bun

Java中String、StringBuffer、StringBuilder的区别详解_java

 java中String.StringBuffer.StringBuilder是编程中经常使用的字符串类,他们之间的区别也是经常在面试中会问到的问题.现在总结一下,看看他们的不同与相同. 1.可变与不可变 String类中使用字符数组保存字符串,如下就是,因为有"final"修饰符,所以可以知道string对象是不可变的. private final char value[]; StringBuilder与StringBuffer都继承自AbstractStringBuilder类,在

android中Intent传值与Bundle传值的区别详解

举个例子我现在要从A界面跳转到B界面或者C界面   这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两遍添加值的方法 那么 如果我用1个Bundle  直接把值先存里边 然后再存到Intent中 不就更简洁吗? 另外一个例子如果我现在有Activity A ,B ,C:现在我要把值通过A经过B传给C你怎么传 如果用Intent的话 A-B先写一遍 再在B中都取出来 然后在把值塞到Intent中 再跳到C 累吗?如果我在A中用了 Bundle 的话  我把Bun