Question

我的位置有问题：FF中的绝对值。我有一个宽度为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

有任何建议我如何解决这个问题？

Expected

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

Answer 2

添加以下规则使其可以在我的Firefox副本中使用：

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

Fiddle

Answer 3

修复示例:)

中的问题

demo

<button class="scrllbtn scrllbtnleft">〈</button>
<button class="scrllbtn scrllbtnright">〉</button>

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

FF中的绝对定位

3 个答案: