border:0;的渲染结果

首先我们来看看border:0;在FF浏览器和IE浏览器中的最终渲染结果。

input {border:0;}
button {border:0;}

这时我们可以通过firebug（1.5.0版本）看到样式中所显示的代码是border:0 none;而并不是我们最初所设定的border:0;也就是说FF浏览器会将边框样式解析为none（border-style:none;）。

演示动画3

通过firebug中“计算出的样式”功能我们可以看到最终的边框样式中border-width为0，border-color为#000000，border-style为none。现在我们再看一下IE浏览器中的表现是怎么样的。

在IE浏览器中我们利用的是IE Developer Toolbar来查看浏览器的最终渲染结果，很明显的可以发现IE浏览器对border:0;的解析时产生了一些偏差，仅仅只是渲染了border- width的属性，而对于input标签中的border-style属性继续保持着原有的属性值outset，对于button标签中的border- style属性增加了outset属性值；border-color还是为定义。这时我们也能发现IE浏览器中input标签和button标签的边框已经被定义为相同的属性。

演示动画4

此时FF浏览器和IE浏览器之间存在的差异是border-style和border-color两个属性。

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

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

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