border:none;的渲染结果

input {border:none;}
button {border:none;}

border:none;的边框定义方式，从广义上理解，其实只是定义了border-style的属性值，对于这点我们也可以从firebug中的样式可以看到边框的样式定义已经由原来的border:0 none;改成border:medium none;了，改变的内容是border-width的样式定义。

但诡异的一点就是我们这里所看到的medium属性值却在firebug最终“计算出的样式”里看不到。

演示动画5

更诡异的内容也要出来了，赶紧打开IE浏览器看看是不是发现在页面中按钮的表现效果也不一样了？

两个浏览器的中按钮在定义了边框为border:none;时居然会在浏览器中的表现方式都不一样了，这个是为什么呢？

演示动画6

看了IE Developer Toolbar中的结果后，总算明白了，原来这个时候IE浏览器仅仅只是渲染了border-style为none，而border-width依然保持原有的属性值，所以在才会与FF浏览器产生差异。

border:0 none;的渲染结果

最后剩下的是border:0 none;的边框样式定义方式，对于这个方式，经过上面的两个对比，相信大家能明白这个属性所定义的内容包含了什么，把border-width和 border-style同时定义为0和none值，让边框“无处藏身”，就算有颜色值也没用了。对于这个的渲染结果就不再像上面一一罗列了，感兴趣的同学可以试试看。

在结束之前再次推荐大家在取消页面元素边框的时候，尽量选择border:0 none;避免出现一些不必要的问题。顺带提示一下，在IE Developer Toolbar中右下角的那个复选框大家在测试的时候可以将其勾选，可以看到更多的默认样式值。

分析border边框属性在浏览器中的渲染方式首发小志博客，如果感觉内容还不错而要转载的朋友请不要怜惜 http://blog.linxz.cn/ 这么一个URL，谢谢！

本文链接：http://www.blueidea.com/tech/web/2010/7417.asp　

出处：小志博客
责任编辑：bluehearts

上一页 border边框在浏览器中的渲染方式 [2] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。