Question

我在firefox中有一些填充和边距“错误”，我还没想到。 This is the test page where the screw-ups are happening.

这是黑色标题框的HTML / CSS代码：

        #caption{
        position:relative;
        display:block;
        margin: -4px 0 0 0;
        width: 650px;
        height:68px;
        background-color: black;
    }
                    <div>
                        <div id="slider2">
                            <div>
                                <img src="img/urban.jpg" />
                            </div>
                            <div>
                                <img src="img/urban2.jpg" />
                            </div>
                            <div>
                                <img src="img/urban3.jpg" />
                            </div>
                        </div>
                    <div id="caption"></div>
                </div>

这也是日程安排代码：

        #schedule{
        height: 500px;
        background-color: #ededed;
        padding: 10px 10px 0px 10px;

    }
        #schedule h2{
            text-align: center;
            font-family: Arial;
            color: rgba(0,0,0,.7);
        }
        .away{
            color: red;
        }
        .gameline{
            border-bottom: 1px solid rgba(0,0,0,.4);
        }


        .lineup > li{
            margin: 0 0 7px 0;
        }
        #date{
            margin: 20px 0 0 0;
            list-style:none;
            width: 70px;
            float:left;
            padding-right:30px;
            font-family: 'Esteban', serif;
            font-family: Arial;
            font-weight: bold;  
        }
            #date > .gameline{
                border-bottom: 1px dashed rgba(0,0,0,0);
            }
        #opponent{
            margin: 20px 0 0 0;
            font-family: 'Esteban', serif;
            font-family: Arial;
            list-style:none;
        }

                <div id="right">
                <div id="schedule">
                    <h2>2012 Schedule</h2>
                    <ul id="date" class="lineup">
                        <li>APR. 21</li>
                        <li class="gameline"></li>
                        <li>SEPT. 1</li>
                        <li class="gameline"></li>
                        <li>SEPT. 8</li>
                        <li class="gameline"></li>
                        <li>SEPT. 15</li>
                        <li class="gameline"></li>
                        <li>SEPT. 22</li>
                        <li class="gameline"></li>
                        <li class="away">SEPT. 29</li>
                        <li class="gameline"></li>
                        <li>OCT. 6</li>
                        <li class="gameline"></li>
                        <li class="away">OCT. 13</li>
                        <li class="gameline"></li>
                        <li>OCT. 20</li>
                        <li class="gameline"></li>
                        <li class="away">OCT. 27</li>
                        <li class="gameline"></li>
                        <li>NOV. 3</li>
                        <li class="gameline"></li>
                        <li>NOV. 10</li>
                        <li class="gameline"></li>
                        <li class="away">NOV. 17</li>
                        <li class="gameline"></li>
                        <li>NOV. 24</li>
                    </ul>

                    <ul id="opponent" class="lineup">
                        <li>Scarlet & Gray Game</li>
                        <li class="gameline"></li>
                        <li>Miami(Ohio)</li>
                        <li class="gameline"></li>
                        <li>Central Florida</li>
                        <li class="gameline"></li>
                        <li>California</li>
                        <li class="gameline"></li>
                        <li>UAB</li>
                        <li class="gameline"></li>
                        <li class="away">Michigan State</li>
                        <li class="gameline"></li>
                        <li>Nebraska</li>
                        <li class="gameline"></li>
                        <li class="away">Indiana</li>
                        <li class="gameline"></li>
                        <li>Purdue</li>
                        <li class="gameline"></li>
                        <li class="away">Penn State</li>
                        <li class="gameline"></li>
                        <li>Illinois</li>
                        <li class="gameline"></li>
                        <li>BYE</li>
                        <li class="gameline"></li>
                        <li class="away">Wisconsin</li>
                        <li class="gameline"></li>
                        <li>Michigan</li>
                    </ul>
                </div>

Answer 1

在LI中使用（对于日期）并设置标签样式，而不是试图并排放置两个LI并使它们匹配。为标签设置宽度float:left。

Firefox为布局添加边距/填充

1 个答案: