firefox绝对定位的工作方式与所有浏览器不同

Question

我已在所有浏览器中测试了chrome，IE，Opera，Safari，它的工作正常但不是最新版本的firefox。

＆＃13;

＆＃13;

body{
    background: red;
    margin: 120px 0;
}

#caption {
    font-size: 36px;
    position: relative;
}
.captions {
    margin-left: 100px;
}
.border-top {
    border-top: 1px solid #fff;
    left: 0;
    position: absolute;
    top: -12px;
    width: 100%;
}
.captions > span {
    background: white;
    padding: 10px;
}
.linebreak {
    display: block;
    height: 26px;
    padding: 0 !important;
    width: 0;
    clear: left;
}

＆＃13;

<div class="captions">
	<span id="caption">
         <span class="border-top">&nbsp;</span>
         <span id="caption-title">Foo Bar</span>
    </span>
    <span class="linebreak">&nbsp;</span>
    <span id="slogan-title">Lorem Ipsum Dolor Sit Amet</span>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的那条线超出了div Foo Bar。我该如何解决这个问题（如果可能的话，不改变标记）？

Answer 1

将#caption设为display:inline-block

演示 - http://jsfiddle.net/Lkb4ncgb/

＆＃13;

＆＃13;

body{
    background: red;
    margin: 120px 0;
}

#caption {
    font-size: 36px;
    position: relative;
    display:inline-block;
}
.captions {
    margin-left: 100px;
}
.border-top {
    border-top: 1px solid #fff;
    left: 0;
    position: absolute;
    top: -12px;
    width: 100%;
}
.captions > span {
    background: white;
    padding: 10px;
}
.linebreak {
    display: block;
    height: 26px;
    padding: 0 !important;
    width: 0;
    clear: left;
}

＆＃13;

<div class="captions">
	<span id="caption">
         <span class="border-top">&nbsp;</span>
         <span id="caption-title">Foo Bar</span>
    </span>
    <span class="linebreak">&nbsp;</span>
    <span id="slogan-title">Lorem Ipsum Dolor Sit Amet</span>
</div>

＆＃13;

＆＃13;

＆＃13;