在CSS中模擬「內部邊界」？

Question

我有下面的CSS 4以下的div。問題是，紅色邊界的邊界將其他邊界覆蓋。我怎樣才能避免這種情況？我試圖增加marginRed，甚至負利潤率，這兩者都無效。

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/