Firefox的CSS扩展父分区而不是IE或Chrome，错误？

问题描述

我试图做一个博客时尚的外观设计与约会块养育div的左边。它工作在IE和Chrome，但在Firefox顶级父格扩展。

I'm trying to do a blog stylish design with a "date block" to the left of parenting div. It works in IE and Chrome but in Firefox the top-parent div expands.

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

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

Here is a picture showing my problem:

虽然我在呢，怎么让我的文本的框的顶部？

And while I'm at it, how to I get my "text" to the top of the box?

推荐答案

要获得轮廓在Firefox工作替换：

To get the outline to work in Firefox replace:

outline: 1px solid #d8d8d8;

使用：

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

要获得放置在顶部的化妆 .post_inner 位置的文本：相对; 和的.blue 的位置是：绝对的; 。然后相应地调整的.blue 的位置。

To get the text aligned to the top make .post_inner position: relative; and .blue position: absolute;. Then adjust .blue's position accordingly.

演示：

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>

这篇关于Firefox的CSS扩展父分区而不是IE或Chrome，错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！