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

我有以下4个div和下面的CSS。问题是，红跨度上的边界比其他边界都要大。我怎样才能避免这种情况？我试着给Spared增加利润，甚至是负利润，但两种方法都不起作用

奖励积分这在IE（8,9测试）中根本不起作用。。。只有蓝色div显示。：）

#span蓝色{位置：固定；
顶部：0px；左侧：0px；
身高：100%；
宽度：10%；
背景色：#4D9DB8；
右边框：10px实心#045B6F；
z-索引：1；}
#span绿色{位置：固定；
顶部：0px；左侧：0px；
身高：10%；
宽度：100%；
背景色：#A4AC79；
边框底部：10px实心#34655F；
z-索引：1；}
#span橙色{位置：固定；
顶部：0px；左侧：0px；
身高：10%；
宽度：10%；
背景色：#FA9D26；
右边框：10px实心#045B6F；
z-索引：2；}
#跨距{位置：固定；
底部：0px；右侧：0px；
身高：90%；
宽度：90%；
背景色：白色；
边缘顶部：20px；
左边距：20px；
边框顶部：10px实心#B52024；
左边框：10px实心#B52024；
z-索引：3；}

您有两个选择：

添加

div{box size:border box}

。这将元素切换到“传统”模式（受IE8+支持）

使用（IE10+）

将边框添加为伪元素（IE8+）

使用伪元素（从

#spanRed

中删除边框）：

请记住，使用

position:fixed

作为布局的基础是非常脆弱的

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

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

$（'#spanRed'）。追加（'''）

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

或者，由于这些都是“无用”元素，只需将其添加到HTML中即可：

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

---

这是您使用的代码：

它基本上是一个背景，而不是主要布局。我最初是在photoshop中做的，只是把它做成了身体的拉伸背景，但我认为如果它能工作的话，这会很酷。此外，任何与IE7不兼容的补丁对我来说都不是补丁，因为不幸的是，我公司的大多数用户仍然使用IE7(

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

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