0

我正在尝试使用 div 在容器中设置分隔线。 这是代码的小提琴

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

顺便说一句，如果有更好的方法使用 HR 或其他东西，我愿意，但我喜欢 div 边界线的外观。该线必须延伸到容器 div 的左右边界。

4

2 回答 2

0

添加这个类，然后在所有浏览器中完美运行。

.dividlineContainer
{
    width:308px;
}
于 2012-09-06T21:20:34.577 回答
0

负利润的解决方案？

以下情况如何：

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

我目前无法访问 IE7 版本进行测试，但它应该可以工作。它适用于我能够测试的所有东西（FF、Chrome、Opera、Safari）。

您的原始版本在 Internet Explorer 中超出范围的原因是由于在将填充应用于父元素时计算子元素的百分比宽度/高度时浏览器之间的差异。不同之处在于每个浏览器实现了不同的“盒子模型”。有关主题结帐的进一步阅读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;
}

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

于 2012-09-06T22:03:39.783 回答