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

编程入门行业动态更新时间:2024-10-15 08:24:04

本文介绍了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

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

演示： jsfiddle/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; }