分析border边框属性在浏览器中的渲染方式

说明border边框属性在赏识器中的渲染方法 首发小志博客，假如感受内容还不错而要转载的伴侣请不要惋惜 http://blog.linxz.cn/ 这么一个URL，感谢！

针对border边框属性在赏识器中的渲染方法很早早年就开始在QQ群中看到各人在接头，而我也一向以border:0 none;的方法处理赏罚。个中虽然也是有我本身为什么要做的缘故起因，对付这个缘故起因在下面的说明中将会提到。在对border边框属性举办说明之前，必要声名的几点内容是：

1. 小志我并不是一个说明专家，只是借助Firebug和IE developer这两个器材在FF赏识器和IE赏识器中查察赏识器的渲染功效；
2. 由于只是查察了FF赏识器和IE赏识器的渲染功效，并不能代表全部的赏识器都是沟通的方法举办渲染。

为了能更好的对边框的样式举办比拟，这里我们选用的是“按钮”元素，但行使的标签却是差异的，它们别离是input标签元素和button标签元素。顺带必要提到的一点就是，这两个标签元素在各个赏识器中的配合点是都属于体系控件元素，边框样式以及按钮配景都是跟体系主题有着绝对性的相关。

行使沟通的XHTML布局代码，别离针对FF赏识器和IE赏识器举办比拟。

<input type="button" value="按钮" />
<hr />
<button>按钮</button>

演示动画1   演示动画2

通过默认的当前体系主题的样式影响，我们发明IE赏识器在对button和input这两个标签元素的理会上已经是存在着一点细节上的差异，但就今朝这个体系主题中所看到的页面示意结果是近乎于沟通的，关于这点有乐趣的同窗可以自行尝试一下。上列所看到的无任何CSS样式界说之前的属性功效中，我们获得的功效是：

    * FF赏识器：input标签和button标签的边框样式为border-width:3px; border-style:outset; border-color:#E5E5E5;
    * IE赏识器：input标签边框样式为border-width:2px; border-style:outset;而button标签边框样式为border-width:2px;

有了这些数据之后，我们再看看当我们针对border边框属性界说了样式之后会是怎么样的一个功效。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!