在 CSS 中模拟“内边框”？

Question

我有以下 4 个带有 CSS 的 div。问题是，红色跨度上的边界覆盖了其他边界。我怎样才能避免这种情况？我尝试为 spanRed 添加边距，甚至是负边距，但都不起作用。

http://jsfiddle.net/eh9rM/

奖励积分 这在 IE（8,9 测试）中根本不起作用......只有蓝色 div 出现。 :)

<div id="spanBlue"></div>
<div id="spanGreen"></div>
<div id="spanOrange"></div>
<div id="spanRed"></div>


#spanBlue      {position: fixed;
                top: 0px; left: 0px;
                height: 100%;
                width: 10%;
                background-color: #4D9DB8;
                border-right: 10px solid #045B6F;
                z-index: 1;}    

#spanGreen     {position: fixed;
                top: 0px; left: 0px;
                height: 10%;
                width: 100%;
                background-color: #A4AC79;
                border-bottom: 10px solid #34655F;
                z-index: 1;}    

#spanOrange    {position: fixed;
                top: 0px; left: 0px;
                height: 10%;
                width: 10%;
                background-color: #FA9D26;
                border-right: 10px solid #045B6F;
                z-index: 2;}         

#spanRed       {position: fixed;
                bottom: 0px; right: 0px;
                height: 90%;
                width: 90%;
                background-color: WHITE;
                margin-top: 20px;
                margin-left: 20px;
                border-top: 10px solid #B52024;
                border-left: 10px solid #B52024;
                z-index: 3;}     

Answer 1

你有两个选择：

1. 添加div { box-sizing: border-box }。这会将元素切换到“传统”模型，where borders and paddings are included in the width（从 IE8+ 支持）
2. 使用Flexible Box model (IE10+)
3. 将边框添加为伪元素 (IE8+)

使用伪元素（去除#spanRed的边框）：

#spanRed:after {
    content:' ';
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0; 
    border:4px solid red;
}

请记住，使用position:fixed 作为布局的基础是非常脆弱的。

编辑：如果需要IE7支持，通过JS添加额外元素：

$('#spanRed').append('<span class="after" />')

然后在 CSS 中引用它。请注意，您必须重复整个样式，不能同时使用两个选择器，否则 IE7 会忽略该规则。

或者，既然这些都是“无用”元素，只需将其添加到 HTML 中：

<div id="spanRed">
   <span class="inner"></span>
</div>

这是你的代码：http://jsfiddle.net/eh9rM/2/