2

我想连续放置 3 条水平线。有谁知道如何在 IE7 的 inline-block 中显示水平线？

这是我的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/

如果有人有解决方案。

非常感谢。

4

3 回答 3

2

给你：http: //jsfiddle.net/eq3Z2/

它也适用于 IE7。

当然，他们不是 HR。它们是 DIV。尝试将 HR 呈现为内联元素会导致 IE7 出错，但我不知道有什么解决方法。

于 2012-08-23T23:27:18.193 回答
1

它必须是内联块吗？如果需要，你不能简单地浮动它们并设置一个高度吗？

编辑 - 示例：

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;

}

再次编辑 - 问题：

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

于 2012-08-23T22:19:23.773 回答
0

如果您可以将 s 包装在hrs 中，似乎有一个解决方案div。

将 div 设置为display:inline（我们可以使用spans 代替，但hrs 在 s 中无效span）¹ 并通过以下方式给divs hasLayoutzoom:1

见http://jsfiddle.net/YqKDJ/1/

hr¹ 顺便说一句， s 在 s 中无效是有原因span的，并且与此处相关。Anhr主要不是一种绘制水平线的方式 - 它具有“主题中断”的特定语义含义。有两个或多个hr元素之间没有内容是没有意义的——第二个主题休息没有什么可以打破的。如果您想要多条水平线用于演示目的，您应该使用 CSS 来创建它们，按照@Cynthia 的回答。

于 2012-08-23T23:41:54.690 回答