FF 中的绝对定位

Question

我在 FF 中的 position:absolute 有问题。我有一个宽度为 100% 的条和两个在左侧和右侧具有静态宽度的条。 我需要将内部栏设置为 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

<button class="scrllbtn scrllbtnleft">〈</button>
<button class="scrllbtn scrllbtnright">〉</button>

.scrllbtnleft {
    left: 0;
}
.scrllbtnright {
    right: 0;
}

Answer 2

添加以下规则使其适用于我的 Firefox 副本：

.scrllbtn:first-child {
    left: 0;
}

Fiddle

Answer 3

类似:)

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;
}