CSS Firefox扩展父div而不是IE或Chrome，bug？

Question

我正在尝试做一个博客时尚的设计，在育儿div的左边有一个“日期块”。它适用于IE和Chrome，但在Firefox中，顶级父div扩展。

HTML

    <div class="post_bg">
        <div class="post_inner">
            <div class="blue">date</div>
            text
            <br /><br />
        </div>
    </div>

的CSS

.post_bg {
  width: 700px;
  background-color: #f0f0f0;
  outline: 1px solid #d8d8d8;
  border-top: 1px solid #fff;
  padding: 5px 5px 5px 5px;
}
.post_inner {
  clear: both;
  background-color: #fdfdfd;
  border: 1px solid #d8d8d8;
}
.blue {
  overflow: visible;
  width: 40px;
  height: 40px;
  background-color: #55a4cc;
  position: relative;
  bottom: -5px;
  right: 40px;
}

这是一张显示我问题的图片：

虽然我在这里，但如何将我的“文字”放到首位？

Answer 1

要使大纲在Firefox中起作用，请替换：

outline: 1px solid #d8d8d8;

使用：

box-shadow: 0 0 0 1px #d8d8d8;

要使文字与顶部对齐，请.post_inner position: relative;和.blue position: absolute;。然后相应地调整.blue的位置。

演示：http://jsfiddle.net/ThinkingStiff/8SyGV/

CSS：

.post_bg {
    background-color: #f0f0f0;
    border-top: 1px solid #fff;
    left: 40px;
    box-shadow: 0 0 0 1px #d8d8d8;
    padding: 5px 5px 5px 5px;
    position: relative;
    width: 300px;
}
.post_inner {
    background-color: #fdfdfd;
    border: 1px solid #d8d8d8;
    position: relative;
}
.blue {
    background-color: #55a4cc;
    height: 40px;
    left: -40px;
    position: absolute;
    top: 0;
    width: 40px;
}

HTML：

<div class="post_bg">
    <div class="post_inner">
        <div class="blue">date</div>
        text
        <br /><br />
    </div>
</div>

Answer 2

这是Firefox 3.X中的“错误”，如here所述。

有一种解决方法，我发现here使用:before添加一个绝对定位的容器，该容器会应用outline。

因此，对于您的代码，您需要从outline中删除.post_bg并将以下CSS添加到样式表中：

.post_bg:before {
   bottom: 0px;
   content: '';
   left: 0px;
   margin: 0;
   outline: 1px solid #d8d8d8;
   padding: 0;
   position: absolute;
   right:  0px;
   top: -1px;      /* -1 to accomodate border-top in .post_bg */
}

JSFiddle：http://jsfiddle.net/GqACN/

您仍应使用@ThinkingStiff的.blue类的新实现来解决问题中提到的文本问题。

更新

可以找到此错误here on bugzilla 。

然而，正如@BoltClock在上面的评论中指出的那样，“没有任何内容可以指定如何根据定位的后代绘制轮廓” - 所以说这是一个错误是不正确的，因为该规范尚不清楚如何实施。 Mozilla刚刚以与谷歌和微软不同的方式解释了该规范。