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

我正在尝试做一个博客风格的设计，在育儿区的左边有一个“日期块”。它在IE和Chrome中工作，但在Firefox中，最上面的父区会扩展

html

下面的图片显示了我的问题：

---

当我这样做时，如何将我的“文本”放在框的顶部？

要使大纲在Firefox中正常工作：

轮廓：1px实心#d8d8；

与：

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

要使文本与顶部对齐，请使用make

和
蓝色
位置：绝对位置。然后相应地调整
.blue
的位置

演示：

CSS:

HTML:


日期
文本



如前所述，这是Firefox 3.X中的一个“bug”

我发现有一种解决方法，它使用
：before
预先设置一个绝对定位的容器，而该容器应用
大纲

因此，对于您的代码，您可以从
中删除
大纲

.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：

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

更新
可以找到这个bug

然而，正如@BoltClock在上面的评论中指出的，“没有任何规定应该如何绘制关于定位子体的轮廓”——因此说这是一个错误是不正确的，因为规范不清楚如何实现它。Mozilla刚刚以不同的方式向谷歌和微软解释了该规范。
你能做一个演示吗？@thirtydot只需使用
边框
而不是
轮廓
-@Zoltan Toth:那会把设计搞得一团糟。@我头疼：比较两个小提琴，你会注意到修改过的那一个上面的灰色边框不见了。由
大纲
填写。
边框顶部
实际上是顶部轮廓下方的白色“高光状”区域。我使用的是firefox 3.6，这对我不适用。你失去了
轮廓
全部（没有外部边界）@MyHeadHurts 3.6？是的，那太旧了。很酷，很明显这几年都没修好。如果我们能在Bugzilla中找到这张罚单的链接那就太好了，假设有人真的提交了一个…@BoltClock我相信这可能是：在IE7或更早版本支持
之前，既不支持
，也不支持
，所以如果你想支持过时的浏览器，你需要想出其他的东西，也是。@我的头很痛：我猜我最后一次对这个问题的评论是正确的。@ThinkingStiff是的，我注意到了。我认为如果不直接在代码中添加额外的div，我们就无法支持IE7。此外，我无意尝试你的答案，这是一个聪明的答案，我只是觉得我应该提到，它不会像你在Firefox3.X或IE8上所想的那样工作（它最初在IE8上工作）
box-shadow: 0 0 0 1px #d8d8d8;

.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;
}

.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 */
}