IE8下绘制横线hr与其他浏览器不同【解决办法】

IE8下用hr绘制横线与其他浏览器不同的原因：

【可跳过本part，点击→解决办法】

1. 不给hr加任何高度修饰

<hr />

用谷歌浏览器打开时：

用IE8浏览器打开时：

可以看到当不给hr加任何宽度或者高毒的属性值时，默认在所有浏览器上的高度为2px；

2.为hr加一个值为1的size属性

<hr size="1">

用谷歌浏览器打开时：

可以看到，在谷歌浏览器中，其content的高度为0，border-top为1，而border-bottom却没有值，所以size为1时在谷歌浏览器中控制的是border的值；

用IE8浏览器打开时：

可以看到，在IE8浏览器中，其content的高度为1，而border-top/border-bottom均为1，不被size影响；

3.当将hr的size属性值更为2时

<hr size="2">

用谷歌浏览器打开时：

可以看到，当size值为2时，border-bottom的值也变成了为1

用IE8浏览器打开时：

可以看到，size的值还是增加在了content中，border-top/border-bottom依旧为1

4.当将hr的size属性值更为5时

<hr size="5">

用谷歌浏览器打开时：

可以看到，当size值大于2时，在谷歌浏览器中，content的高度值为size-2（border）

用IE8浏览器打开时：

猜都猜的到，size的值还是增加在了content中，border-top/border-bottom依旧为1
但是！
让我们看一下挥绘制出的横线样式

？？？满脸迷惑。

所以，如果大家想要绘制一条在IE8和其他浏览器下均为1px高度的横线，我提出以下2种建议。（均为div绘制）

第一种：

<div style="height: 1px;background-color: black"></div>  

第二种

<div style="border-bottom: 1px solid black"></div>