1

我有以下 div

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

在“普通”网络浏览器中，计算 div 的宽度以适合文本。并且hr是 100% 的 div。 在此处输入图像描述

但在 IE7 中，hr导致 div 扩展到正文的 100%。 在此处输入图像描述

我需要在某处添加任何聪明的 css 以使其在 IE7 中正常运行吗？

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

4

3 回答 3

1

在 IE6/7 中，display:inline-block仅适用于默认内联的元素（例如，span）。因此，如果您尝试将 div 设置为display:inline-block，它在 IE6/7 中将不起作用。

内联元素会将自身调整到其内容的宽度。一个 inline-block 元素默认会做同样的事情，如果它没有给出明确的宽度。如果 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 演示

于 2012-06-28T15:56:02.507 回答
0

在博客上找到了一个方法。原件需要modernizer.js。我已经编辑过了。

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

CSS： .hrdemo hr { display:none }

但是，如果您div.hrdemo在某个浮动容器内；您可能必须为其分配固定宽度（对于 IE7）。

于 2012-06-28T16:00:03.663 回答
0

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

一种更现代的方法是使用 a 的border属性<div>。

IE 7 渲染的图像：

在此处输入图像描述

Chrome 19 渲染的图像：

在此处输入图像描述

HTML

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

CSS

​.border-top{
  border-top:#000 1px solid;
  padding-top:1em;
}​

注意： IE 6 & 7 不支持display:inline-block，所以你可能需要float:left改用。下面的文章比较了上述属性的使用：

于 2012-06-28T16:03:22.070 回答