Question

我在下面的CSS中有以下4个div。问题是，红色范围的边界超过其他边界。我怎么能避免这个？我尝试为spanRed添加边距，甚至是负边距，两者都没有效果。

奖励积分这在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

您有两种选择：

添加div { box-sizing: border-box }。这会将元素切换为“传统”模型where borders and paddings are included in the width（从IE8 +支持）
使用Flexible Box model（IE10 +）
将边框添加为伪元素（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/

在CSS中模拟“内部边界”？

1 个答案: