CSS Firefox 扩展父 div 但不是 IE 或 Chrome，错误？

Question

我正在尝试做一个博客时尚设计，在育儿 div 的左侧有一个“日期 block ”。它适用于 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>