Question

我有以下div

<body>
<span style="border:1px solid red; display:inline-block">
    Some text<br />
    <hr />
    some more text
</span>
</body>

在＆＃34;正常＆＃34;在Web浏览器中，div的宽度计算为适合文本。 hr是div的100％。 enter image description here

但是在IE7中hr导致div扩展到身体的100％。 enter image description here

我是否需要在某处添加任何聪明的CSS以便在IE7中正确运行？

请注意，我无法设置任何固定宽度。

Answer 1

在IE6 / 7中，display:inline-block仅适用于默认情况下内联的元素（例如，span）。因此，如果您尝试将div设置为display:inline-block，则无法在IE6 / 7中使用。

内联元素将自身调整为其内容的宽度。如果未给出显式宽度，则默认情况下，内联块元素将执行相同操作。如果hr是100％（其父项的100％，而后者是100％的孩子），那么hr宽度的循环定义可能无法按预期工作（100％的内容？100％本身）。

为了避免在某些浏览器（特别是IE6 / 7）中可能无法正常工作的宽度的循环定义，hr（div，span或其他）的容器应该具有定义的宽度（以px为单位，％或em）或hr本身应具有明确的宽度（以px或em为单位）。否则，宽度不会以任何可识别的方式定义，并且由浏览器决定默认情况下该做什么。

如果您无法设置任何宽度，则可能会使用hr标记进行排除。根据我运行的测试，CSS解决方案的选项看起来也不是很好（没有设置宽度）。

修改

我认为在没有设置宽度或依赖JavaScript或jQuery的情况下执行此操作的唯一方法是，如果在每行文本后都有一条水平线是可以接受的（包括任何包含到下一行的长段，如果有的话是任何）。在这种情况下，您可以将bg图像添加到容器中，该容器包含一个水平线，其增量等于文本的行高，显示在垂直偏移量等于行高度，因此一行不会出现在顶部第一行文字。

HTML

<div class="main"> <p>This is the first line.<br/> This is the second line.<br/> This is a long line that will wrap around to the next line if the container is not very wide. </p> </div>

CSS

.main { background: url(image.png) repeat-x left 15px; } p { font-size: 12px; line-height: 15px; }

jsfiddle demo

Answer 2

在博客上找到一种方法。原始版本需要modernizer.js。我已经编辑过了。

HTML： <div class="hrdemo"><hr /></div>

CSS： .hrdemo hr { display:none }

但是，如果您的div.hrdemo位于某个浮动容器内;你可能需要为它分配一个固定的宽度（对于IE7）。

Answer 3

width标记的<hr>属性已被弃用，因此您的样式选项仅限于<hr>代码。

更现代的方法是使用border的{{1}}属性。

IE 7呈现的图像：

enter image description here

Chrome 19呈现的图片：

enter image description here

jsFiddle Demo

<强> HTML

<div>

<强> CSS

<body>
  <div style="border:1px solid red; float:left;">
    <p>
      Some text
    </p>
    <p class="border-top">
      some more text
    </p>
  </div>
</body>

注意： IE 6＆amp; 7不支持.border-top{ border-top:#000 1px solid; padding-top:1em; }，因此您可能需要使用display:inline-block。下面的文章比较了上述属性的使用：

CSS display: inline-Block: Why It Rocks, And Why It Sucks

hr使得父div在IE7中调整为100％

3 个答案: