在CSS中模拟"内部边界"？

Question

我有以下4个div与下面的CSS.问题是,红色范围的边界超过其他边界.我怎么能避免这个？我尝试为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 }.这会将元素切换为"传统"模型,其中边框和填充包含在宽度中(从IE8 +支持)
2. 使用Flexible Box型号(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/