完美的hr-兼容各个浏览器firefox,ie6,ie7

兼容浏览器的完美 hr：

height:1px;
border:none;
border-top:1px solid Black;
margin:0;
*margin:0 0 -14px 0;
float:none;
*float:left;
display:block;

1.hr元素是一个块级元素，是一个box，有border

2.高度： size和 style.height.

ie和 firefox对size解释和计算是不同的，所以最好不用 size，用 height，但是会出现一个有边框的 box，所以将 border:none.

firefox下用了 size就是实心的 box，不用就是一个普通的块级元素。


3.颜色： color和 style.border-color

height如果不大于 2px是看不出这两个属性的区别的。

firefox：color=border-color,高度大于2的时候，会出现一个 空心的box。

IE：对 border-color不识别，要使用 border:1px solid Black;

4.边距

hr在 firefox下没有默认边距（即使有用margin:0也可以将其消除）

hr在ie下有默认的上边距14px和下边距14px（即使将margin：0），用float来消除margin-top（请用*float,或者用width然后再float.）

然后在使用css hack对ie设置一个margin-bottom:-14px,这样下面的元素就会上移14px，就好像把hr下面的边距消除了一下。

ps：hr在firefox下居然是圆角的，而且如果将hr的高和宽设置相同的值，就可以得到一个圆（实心或空心）哦。


其实是将hr当成一个div还使用了，而且还是一个不同浏览器解析起来有很大差异的诡异的div，所以使用hr还不如直接用div的border。