css - FF 中的绝对定位

Question

我在 FF 中遇到了 position:absolute 的问题。我有一个宽度为 100% 的条形图，左侧和右侧有两个静态宽度的条形图。我需要将内部 Bar 设置为 100% 以使其响应。当我给边框指定百分比值时，它看起来很糟糕。在 Chrome 甚至 IE 中!!!它工作正常，但 Firefox 在右侧添加了两个短条(如图所示)。

HTML:
  <div id="wrapper">
    <div class="row-fluid">
        <div class="span12">
            <div id="slider">
                <button class="scrllbtn">〈</button>
                <div id="sliderFrame">
                    <div id="innerSlider">
                        <button class="videoButton">▶</button>
                        <button class="videoButton">▶</button>
                        <button class="videoButton">▶</button>
                        <button class="videoButton">▶</button>
                    </div>
                </div>
                <button class="scrllbtn">〉</button>
            </div>
            <div id="videos"></div>
        </div>
    </div>
 </div>

Styles:

    #wrapper
    {
        width: 960px;
        margin: 0 auto;
        border: solid 1px red;
    }

    #slider {
        padding-top: 0.4em;
        clear:left;
        width:100%;
        height: 160px;
        display:block;
    }
    #sliderFrame {
        width:100%;
        height:160px;
        overflow-x: hidden;
        overflow-y:hidden;
        float:left;
        border-top: solid 1px #043860;
        border-bottom: solid 1px #043860;
    }
    #innerSlider {
        width:950px;
        height:200px;
        clear:none;
    }
    .scrllbtn {
        position: absolute;
        height:162px;
        width: 20px;
    }
    .scrllbtn:first-child {
        clear:left !important;
    }
    .scrllbtn:last-child {
        margin-left: -20px;
        float:right;
    }
    .scrllbtn:focus {
        outline: none;
    }
    .videoButton {
        float:left;
        width:200px;
        height:160px;
    }

Fiddle

关于如何解决该问题的任何建议？

Answer 1

像这样的东西 :)

demo

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

.main {
    position: absolute;
    width: 100%;
    height: 500px;
    background: red;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    background: orange;
    width: 100px;
    height: 500px;
}


.left {
    position: absolute;
    top: 0;
    left: 0;
    background: gray;
    width: 100px;
    height: 500px;
}