Div标签在Internet Explorer上的行为有所不同

Question

I am trying to represent a line inside html. 我试图代表html中的一行。 For this I am using this code: 为此，我使用以下代码：

<div class="blue_bar" style="margin-top: 10px;"></div>

In the CSS I have define this: 在CSS中，我定义了以下内容：

.blue_bar
{
    height: 5px;
    BACKGROUND-COLOR: rgb(0,0,136);
    margin-top: 10px
}

Now, this works good on Google Chrome, but on IE it shows the line different. 现在，这在Google Chrome上运行良好，但在IE上却显示出不同之处。 I have attached two pictures with the results: 我在结果中附上了两张图片：

Chrome: 铬：
在此处输入图片说明

IE: IE：
在此处输入图片说明

Is there a way I can fix the line on IE to look like the one on Chrome ? 有没有办法可以将IE上的线固定为Chrome上的线？

edit: This problem occurs when using IE9, it works ok for IE10. 编辑：使用IE9时会出现此问题，对于IE10来说可以正常工作。

Answer 1

Add a font-size: 0; 添加字体大小：0; attribute. 属性。 Its an IE9 (and lower) bug that doesn't let you have DIV elements smaller than the font size. 它是IE9（及更低版本）的错误，不允许您使用小于字体大小的DIV元素。

<html>
<head>
<style>
.blue_bar
{
    height: 5px;
    background-color: rgb(0,0,136);
    margin-top: 10px;
    font-size: 0;
}
</style>
</head>
<body>
<div class="blue_bar" style="margin-top: 10px;"></div>

</body>
</html>

UPDATE : Revised this answer to work in IE9 更新：修改此答案以在IE9中工作

高度固定

Div标签在Internet Explorer上的行为有所不同

问题描述

1 个解决方案

解决方案1
1 2013-11-18 08:50:11

Div标签在Internet Explorer上的行为有所不同

问题描述

1 个解决方案

解决方案1 1 2013-11-18 08:50:11

解决方案1
1 2013-11-18 08:50:11