水平线内嵌块IE7

我想在连续放3条水平线。有谁知道如何把水平线显示在IE7中的内嵌块？水平线内嵌块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/

如果任何人有一个解决方案。

非常感谢。

来源

2012-08-23 fliim

这有什么好处？ http://jsfiddle.net/R49YG/1/ –

也不适用。 – fliim

http://jsfiddle.net/sRuz3/5/ – Jawad

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

它工作在IE7也。

当然，他们不是HR。他们是DIV。试图将HR作为内联元素正在绊倒IE7，但我不知道解决方法。

来源

2012-08-23 23:27:18 Cynthia

谢谢！效果不错 – fliim

高兴地帮助:) – Cynthia

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

编辑 - 例如：

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-23 22:19:23 JohnDevelops

我没有尝试将它们置于浮动状态，但我想先查找是否有更简单的方法。 – fliim

Dosnt比浮动我的朋友容易得多:) 它是相当可靠的跨浏览器，并且通常做你所要求的，只要有一点经验。以示例更新我的答案。 – JohnDevelops

hr的布局是固定的，我在它们上应用一个固定宽度。感谢您的建议。左边的浮动似乎不起作用：/ – fliim

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

设置div的到display:inline（我们可以使用span！而非但hr s为不span S适用）¹，并通过zoom:1

给div小号的hasLayout见http://jsfiddle.net/YqKDJ/1/

¹顺便说一句，hr s在span s中无效并且与此处相关的原因是有原因的。一个hr主要不是绘制水平线的方式 - 它具有“主题突破”的特定语义。没有内容的两个或两个以上元素没有任何意义 - 第二个专题突破没有任何突破。如果你想要多个水平线用于表示目的，你应该使用CSS创建它们，沿着@Cynthia的答案。

来源

2012-08-23 23:41:54 Alohci

水平线内嵌块IE7

回答

相关问题