CSS Firefox expands parent div but not IE or Chrome, bug?

问题

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?

回答1:

To get the outline to work in Firefox replace:

outline: 1px solid #d8d8d8;

With:

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

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

Demo: 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>

回答2:

This is a "bug" in Firefox 3.X as described here.

There is a workaround which I found here that uses :before to prepend an absolutely positioned container which applies the outline instead.

So for your code you would remove outline from .post_bg and add the following CSS to your stylesheet:

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

You should still use the new implementation of the .blue class by @ThinkingStiff to resolve the text issue mentioned in your question.

Update

This bug can be found here on bugzilla.

However, as pointed out by @BoltClock in the comments above, "there's nothing that specifies how outlines should be drawn with respect to positioned descendants" - so to say this is a bug is incorrect since the spec is not clear on how it is to be implemented. Mozilla have just interpreted the specification in a different way to Google and Microsoft.

来源：https://stackoverflow.com/questions/8857008/css-firefox-expands-parent-div-but-not-ie-or-chrome-bug

标签

css

browser