CSS Firefox расширяет родительский div, но не IE или Chrome, ошибка?

Question

Я пытаюсь сделать блог стильным дизайном с «блоком дат» слева от родительского div.Он работает в IE и Chrome, но в Firefox расширяется верхний родительский элемент.

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, как описано здесь .

Существует обходной путь, который я нашел здесь , который использует :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/

Вам по-прежнему следует использовать новую реализацию класса .blue от @ThinkingStiff для решения проблемы с текстом, упомянутой в вашем вопросе.

Обновление

Эта ошибка может быть найдена здесь на bugzilla .

Однако, как указал @BoltClock в комментариях выше, « нет ничего, что определяло бы, как следует рисовать контуры относительно позиционированных потомков » - так сказать, это ошибка, так как Спецификация не ясно, как это должно быть реализовано. Mozilla только что по-разному интерпретировала спецификацию для Google и Microsoft.