Question

我正在尝试使用div在容器中设置分隔线。 Here is the fiddle for the code

除了IE7之外，所有浏览器都能正常工作，其中边框延伸通过容器div的右边框区域。尝试过很多东西。不知道还有什么可以尝试。

顺便说一下，如果有更好的方式使用人力资源或别的东西，我就是这样，但我喜欢div边界线的样子。该行必须延伸到容器div的左右边界。

Answer 1

添加此课程，然后在所有浏览器中完美运行。

.dividlineContainer
{
    width:308px;
}

Answer 2

具有负边距的解决方案？

以下内容如何：

.divideline {
  height:1px;
  line-height:1px;
  border-top:1px solid #ccc;
  margin: 8px -1.5em 8px -.75em;
}

我目前无法访问IE7版本进行测试，但它应该可以正常运行。它适用于我能够测试的所有内容（FF，Chrome，Opera，Safari）。

原始版本超出Internet Explorer范围的原因是由于在将填充应用于父元素时计算子项的百分比宽度/高度时浏览器之间的差异。差异在于每个浏览器实现不同的“Box模型”。如需进一步了解主题结帐http://www.quirksmode.org/css/box.html或http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

.divideline {
  ...
  width:125%;
  ...
}

另外，使用+ 25％来考虑你的.75em填充会导致问题，如果你的元素涉及到更改宽度 - 因为混合测量只会在某些值上对齐。

更好的方法

而不是实现必须依靠负边距正确定位的分界线。最好使用HTML自然的工作方式，以反对它。以下将使您的生活更轻松：

<div class="ccr">
  <div class="pad divide-after">
    <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     Ut enim ad minim veniam.
    </p>
  </div>
  <div class="pad">
    <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     Ut enim ad minim veniam.
    </p>
  </div>
</div>

然后：

.ccr {
  width: 48%;
  margin: 0 0 0 11px; 
  border: 1px solid #ccc;
}

.pad {
  padding: .75em;
  margin-bottom: 8px;
}

.divide-after {
  border-bottom: 1px solid #ccc;
}

通过将填充应用于单独的非尺寸元素，您可以自动避免框模型问题 - 因为尺寸和填充总是单独计算。通过将划分添加到现有包装器意味着您减少了标记。

IE7边框超出了容器宽度

2 个答案:

具有负边距的解决方案？

更好的方法