重叠具有相对位置的div会导致空格

Question

我的“标语”由橙色条纹组成，可扩展屏幕的整个宽度，高20px。左边是蓝色30％宽的条带，高度相同，右边是绿色30％宽的条带。左右条带应该是恰好位于橙色全宽条带上方的div，但它们无法正常工作。

在Windows 7上的Chrome 43上看起来没问题。但它有两个问题：它会影响下面的菜单，导致它包装（所有浏览器），左右标语在查看时没有正确排列Firefox 39，iPad上的Safari和iPad上的Chrome。我有这种感觉，我做错了什么，但我不知道它是什么。有什么想法吗？

这是小提琴：http://jsfiddle.net/postiffm/kg1gLyrv/

它现在在aahcdc.com上播放，因此您可以轻松地看到问题。

#Tagline {
    display: block;
    height: 20px;
    border-style: solid;
    border-radius: 7px;
    border-color: #ff9706;
    background-color: #ff9706;
    color: white;
    font-weight: normal;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 7px;
    margin-bottom: 10px;
}
#TaglineLeft {
    position: relative;
    height: 20px;
    width: 30%;
    bottom: 21px;
    left: -3px;
    border-style: solid;
    border-radius: 7px;
    border-color: #6673aa;
    background-color: #6673aa;
}
#TaglineRight {
    position: relative;
    float: right;
    height: 20px;
    width: 30%;
    bottom: 47px;
    right: -4px;
    border-style: solid;
    border-radius: 7px;
    border-color: #7e922e;
    background-color: #7e922e;
}

<div id="Tagline">My Tag Line.
<div id="TaglineLeft"></div>
<div id="TaglineRight"></div>
</div>

Answer 1

当使用relative位置时，元素仍然占据原来的空间。我建议将absolute位置用于两个侧面元素。简化演示如下。

＆＃13;

＆＃13;

#Tagline {
    color: white;
    font-weight: normal;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 5px;
    border: 0 solid #ff9706;
    border-radius: 7px;
    background-color: #ff9706;
    position: relative;
}
#TaglineLeft, #TaglineRight {
    position: absolute;
    height: 100%;
    width: 30%;
    top: 0;
    border-radius: 7px;
}
#TaglineLeft {
    left: 0;
    border: 0 solid #6673aa;
    background-color: #6673aa;
}
#TaglineRight {
    right: 0;
    border: 0 solid #7e922e;
    background-color: #7e922e;
}

＆＃13;

<div id="Tagline">
    My Tag Line.
    <div id="TaglineLeft"></div>
    <div id="TaglineRight"></div>
</div>

＆＃13;

＆＃13;

＆＃13;