在具有动态宽度的居中 div 内具有 100% 宽度的 div？

Question

我不确定如何跨浏览器完成这项工作，所以我需要你的一些专业知识；）

如何使样式看起来像这样并且可以跨浏览器使用？ （IE7也是）

http://imageshack.us/photo/my-images/543/examplek.jpg/

• 红色框有一个快速定义的宽度
• 绿色框在红色框内居中，具有动态宽度 + 内边距/边框
• 蓝色框是一个“鼠标悬停”的 div，它需要与绿色框具有相同的宽度（没有填充/边框）

Answer 1

这是实现此目的的一种方法（绿色框具有动态宽度）： http://jsfiddle.net/nKdt6/

HTML

<div class="outer">
    <div class="inner">
        <p>
            lorem ipsum
        <p>
        <div>
            <p>Blah blah blah</p>      
        </div>   
    </div>
</div>

CSS

.outer {
    background-color : red;
    text-align: center;
    width: 500px;
}

.inner {
    background-color: lime;
    border: 3px black solid;
    display: inline-block;
    padding: 20px;
    *display: inline;
    *zoom: 1;
    position: relative;
    margin: 100px 0;
    border-radius: 10px;
    overflow: hidden;        
}

.inner > div {
    display: none;
    background-color: aqua;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;  
}

.inner:hover > div {
    display: block;   
}

要在 .inner 元素具有动态宽度时居中，我们可以在 .outer 中使用 text-align: center 和在 .inner 中使用 display: inline-block。我添加了额外的 CSS *display: inline 和 *zoom: 1 以使其在 IE7 中工作，因为它不支持 display: inline-block。

编辑

要在宽的白色内边框周围获得细的黑色轮廓（外边框）（如下面的 cmets 中 @DonPedro 实现和演示的那样），您可以向控制整个高度的内部子元素添加第二个边框和父元素的宽度。在上面的示例中，这是.inner > p。

CSS

.inner {
    ...
    border: 1px black solid; 
    ...
}

.inner > p {
    ...
    border: 10px solid white;
    ...
}

工作中的 JSFiddle：http://jsfiddle.net/nKdt6/1/（由@DonPedro 提供）

由于border-radius 样式，这无法使用outline 实现，据我所知，Mozilla 是唯一支持任何类型轮廓半径 (-moz-outline-radius) 的浏览器。