Question

我想连续放3条水平线。有谁知道如何在IE7中的内联块中显示水平线？

这是我的CSS：

hr.small {
    width: 28.9%;
    margin-right: 6px;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    height: 3px;
    border: 0px;
    color: #7c8690;
    background-color: #7c8690;
}

但它不起作用。

这是JSFiddle链接：http://jsfiddle.net/sRuz3/6/

如果有人有解决方案。

非常感谢。

Answer 1

在这里：http://jsfiddle.net/eq3Z2/

它也适用于IE7。

当然，他们不是人力资源部门。他们是DIV。尝试将HR渲染为内联元素正在绊倒IE7，但我不知道一种解决方法。

Answer 2

它必须是内联块吗？你能不能简单地漂浮它们并在必要时设置一个高度？

编辑 - 示例：

hr.small {

    float:left;
    width: 28.9%;
    margin-right: 6px; /* Choice: Use border instead or halve the margin for IE7 and lowwer (double margin float bug). */
    height: 3px;
    background-color: #7c8690;

}

再次修改 - 问题：

这是一个流畅的布局，容器有多大？您正在设置动态宽度但是固定边距，这将导致小规模问题，并在大范围内向最右侧引入不需要的空白区域。如果是固定区域，则考虑使用固定宽度。

Answer 3

如果你可以将hr包裹在div中，似乎有一个解决方案。

将div设置为display:inline（我们可以使用span代替hr s在span s）中无效¹并同时给出{{1} } s hasLayout via div

请参阅http://jsfiddle.net/YqKDJ/1/

¹顺便说一句，zoom:1 s hr s无效，这与{}}相关。 span主要不是绘制水平线的方式 - 它具有“主题中断”的特定语义含义。拥有两个或更多hr个没有任何内容的元素是没有意义的 - 第二个主题中断没有什么可以突破的。如果你想要多条水平线用于演示目的，你应该使用CSS来创建它们，就像@ Cynthia的回答一样。

水平线内联块IE7

3 个答案: