hr 使父 div 在 IE7 中调整为 100%答案

【问题标题】：hr makes the parent div resize to 100% in IE7hr 使父 div 在 IE7 中调整为 100%
【发布时间】：2012-06-29 06:51:22
【问题描述】：

我有以下 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 中正常运行吗？

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

【问题讨论】：

我希望你意识到span 是不是 div。另外，display:inline-block 很确定 IE7 不支持inline-block
我从一个 div 开始，然后我看到一个帖子说我应该使用 span 和 display:inline-block 来解决这类问题。但在这种情况下它不起作用。
尝试将属性width: 100% !important 添加到您的
。只需添加一些类。 P.S.：在这里在你的 HTML 中使用任意样式，这是一种非常糟糕的做法。
@Ecko 恐怕没用。内联样式仅用于示例。在现实生活中，我将其全部保存在 CSS 文件中！
@Johann：你能在 jsfiddle 中发布你的整个 HTML/CSS 代码吗？

标签： css html internet-explorer-7 internet-explorer-6

【解决方案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 demo

【讨论】：

【解决方案2】：

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

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

IE 7 渲染的图像：

Chrome 19 渲染的图像：

jsFiddle Demo

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。下面的文章比较了上述属性的使用：

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

【讨论】：

感谢您的回答！但这恐怕会导致与 IE7 中的原始代码相同的问题！
据我所知，hr 标签的 HTML 属性已被弃用（align、noshade、size、width），支持 CSS 样式，但 hr 标签本身并未被弃用。
马特·考夫林，你是对的。我一直有错误的想法。 <hr /> 不推荐使用某些属性，但标签本身不推荐使用。谢谢！（我正在修改我的答案）

【解决方案3】：

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

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

CSS： .hrdemo hr { display:none }

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

【讨论】：