关于hr标签的一点认识

日期：2013-11-30  来源：攀枝花惠康网络公司

<hr> 标签可插入一个水平线。水平分隔线（horizontal rule）可以在视觉年夜将文档分隔成各个部门。

还有一点<hr>在浏览器中凡是是以2像素高的明暗线呈现的，而我们的设计稿凡是只有1个像素。

在经常多时查找和测试，清算了一个斗劲兼容的css样式：

hr {margin-top:7px;*margin: 0; border: 0; color: #FFF; background-color: #FFF; height: 1px }

良多时辰我们用css中的border属性，或者border-top，或者border-bottom来实现这种效不美观。这么做的原因年夜致的出于各个浏览器对<hr>的默示有一点点的纷歧致：

1. 凡是默示在和文档其他标签的距离，IE要比FF超出跨越7像素；
2. 线条的颜色节制各个浏览器也纷歧样；

此鱿负

1. margin-top:7px;*margin: 0;是解决ie和ff matgin-top纷歧致的问题；
2. border: 0; 是去失踪ff的一条暗影线；
3. color: #FFF; 是设置ie下水平线的颜色；
4. background-color: #FFF; 是设置FF下水平线的颜色；
5. height: 1px;是设置水平线的高度，当然你也可以把它设置2px，3px；

还有以下<hr />的css属性我们也可以看看；

1. 宽度：width:80%或者width:80px ；
2. 对齐： text-align:center; 或者 text-align:left; 或者 text-align:right;

扩展阅读：

1. http://www.sovavsiti.cz/css/hr.html
2. http://www.3internet.co.uk/resources/Design/theHRtag.aspx