Question

HTML：

<div id="wrapper">

    <div id="header">
        <div id="logo">

        </div>
        <div id="search">
            <input type="text" name="match" id="match"/>
            <input type="button" value="search" id="searchbtn"/>
        </div>
        <p class="clear"/>
        <div id="horNav">
            <ul class="horNav">
                <li><a class="home" href="#">HOME</a></li>
                <li><a class="submit" href="#">SUBMIT</a></li>
            </ul>
            <ul class="horLeft">
                 <li><a class="tags" href="#">TAGS</a></li>
            </ul>
            <ul class="advertisment">
                <li ><a class="contact" href="#">CONTACT</a></li>
            </ul>
            <ul class="horRight">
                 <li><a class="hello" href="#">HELLO</a></li>
            </ul>

        </div>
    </div>

        <div id="posts">
            <p></p>
        </div>
        <div id="verNav">
            <p></p>
            <div id="category">
                <ul></ul>
            </div>
            <div id="country">
                <ul></ul>
            </div>
        </div>
        <div id="adverts">
            <p>popular</p>
            <div id="favorite">
            <div><img src="http://lookaroundyou.net/uploads/thumb/yCrbv81SBHg">
                <a href="">thumb 2 title</a></div><div><img src="http://lookaroundyou.net/uploads/thumb/2jMIP1uZ-gU">
            <a href="">thumb 1 title</a></div><div><img src="http://lookaroundyou.net/uploads/thumb/gGZtblo9D9s">
            <a href="">thumb 3 title</a></div><div><img src="http://lookaroundyou.net/uploads/thumb/pYsn2_YrzzU">
            <a href="">thumb 4 title</a></div></div>
        </div>

        <div id="footer">
            <ul class="horNav">
                <li class="horNav"><a href="#">TOP</a></li>
            </ul>
        </div>

    </div>

的CSS：

@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-webfont.eot');
    src: url('Quicksand_Book-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Book-webfont.woff') format('woff'),
         url('Quicksand_Book-webfont.ttf') format('truetype'),
         url('Quicksand_Book-webfont.svg#webfontQNKLE8Me') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('eot'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#webfont41HQJ7Rv') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
    margin:0;
    padding:0;
    font: 12px arial,helvetica,verdana,sans-serif;
    color:black;
    list-style: none;
    text-decoration: none;
    text-align: left;
}
body{
    text-align: center;
}

html{
    overflow-y: scroll;
}
    #wrapper{
        width:85%;
        margin:0 auto;
        min-width:720px;
        max-width:1000px;
    }
/*    #header, #logo, #category,#country{
        width: 100%;
        float:left;
    }*/
    #header{
        margin-top: 15px;
        max-width: 952px;
}

    #logo{
     float: left;
    }
    #search{
        float: right;
        vertical-align: bottom;
    }


    #horNav{
    border-bottom: 2px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    padding: 2px 0;
    overflow: hidden;
    display: block;
    width: 100%;
    }

    input{
        display: inline;
}


#posts{
    width:50%;
    max-width: 522px;
    z-index: 200;
}
div.post{
    position: relative;
}
#verNav{
    width:20%;
    margin:0 2%;
    max-width: 130px;
}

#adverts{
    width:30%;
    max-width: 300px;
}
#posts,#verNav,#adverts{
    float:left;
}

#posts div.post,#verNav div, #adverts div{
    margin-top:25px;
}

#posts embed, #posts object{
    width: 100%;
    max-width: 512px;
    height: 280px;
}
#pages{
    display: block;
    overflow: hidden;
    width: 100%;
}

#footer{
    width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
    clear:both;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

#mysql{
    margin-top: 20px;
}

#mysql label{
    float: left;
    width: 100px;
}

#mysql label,#mysql input{
    font-size: 14px;
    margin-bottom: 4px;
}
#mysql input{
    border:1px solid black;
}
#mysql input:textarea{
    width: 150px;
}
.clear{
    clear: both;
}


#logo h1 a{
    font-style:italic;
    text-decoration: none;
    font-size: 44px;
}

    #horNav a{
/*        background: black;*/
    }

#category{
    display: none;
}

#verNav p{
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
}


#verNav li{
    /*padding: 1px 0;
    border-top: 1px #b8baba solid;*/

}

#verNav ul{
/*    margin-right: 75px;*/
/*    border-bottom: 1px #b8baba solid;*/

}

#posts div.tube,#posts div.galerina{
    border-bottom: none;
}

#verNav a, #verNav li{
    font-family: 'QuicksandBook';
    font-size: 13px;
    color:#6b6f70;
}
#verNav li{
        margin-bottom:1px;
}
#verNav p{
font-family: 'QuicksandBook';
    font-size: 13px;
color:#14b2c3;


}

    .horNav li{
        float:left;
        border-right:2px solid #e6e6dc;
    }

    .horLeft{
        float: left;
    }

    .horRight{
        float: right;
}

    .advertisment li{
        float:right;
        border-left:2px solid #e6e6dc;
    }

    #horNav a,#footer a{
        display:block;
        padding:3px 3px;
        -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     border-radius: 20px;
/*        color:white;*/
font-family: HELVETICA NEUE;
        font-size: 18px;
/*        height: 37px;*/
    }

    #horNav li, #footer li{
        padding: 0 2px;
}

    #horNav a:hover, #footer a:hover{
        background:#e6e6dc;
    }
    .home{
        color: #e23598;
}
.submit{
    color: #ffd236;
}
.tags{
    color: #a5c43a;
}
.hello{
    color: #ffd236;
}
.contact{
    color: #a5c43a;
}
#verNav a:hover{
    background: #e6e6dc;
}

iframe{
    border: none;
    font-size: 14px;
}

#posts div{
    border-bottom: 2px black solid;
    margin-bottom: 20px;
}

#posts iframe{
    border: none;
    width:100%;
    height:280px;
    max-width: 512px;
}

.title{
    font-size: 20px;
    font-family: 'QuicksandBold';
    color: #6b6f70;
}

.description{
    font-family: HELVETICA NEUE;
    font-size: 14px;
    border-bottom: 1px grey dotted;
    margin-top: 14px;
    padding-bottom: 5px;
    text-align: justify;
}

.info{
    font-family: HELVETICA NEUE;
    font-size: 14px;
color: #6b6f70;
    padding: 5px 0;
}

.category,.country{
        font-family:helevetica neue;
        font-size:14px;
color: #6b6f70;


}

#fade{
    position: fixed;
    top: 0;
    left: 0;
    background: #5f5f5f;
    z-index: -100;
    width: 100%;
    height: 100%;
    opacity:0;
}
input#galName{
    visibility: hidden;
}

input#url,input#favorite{
    float: left;
}

div#mysql div {
    clear: both;
}

input#thumb{
    border:none;
    font-size: 12px;
    visibility: hidden;
}

div#favorite{
    width: 97%;
}

div#favorite div{
    width: 45%;
    float: right;
    position: relative;
    margin-left: 5px;
}

div#favorite a{
    position: absolute;
    top: 20px;
    left:0px;
    background: #c9c1c1;
}

div#favorite img{
    width: 100%;
    max-width: 140px;
}

在我的示例中，div＃favorite中的thums在chrome和opera中正确显示但在firefox中没有显示？

jsfiddle是HERE
实时版本为HERE

Answer 1

在：

中指定的“width”属性有问题

div#favorite div {}

删除它以解决问题。

Answer 2

浮动在不同浏览器中断点的区别可能是由于默认边距不同吗？您只是指定margin-left。您可能希望尝试更改CSS，如下所示：

div#favorite div{
    width: 45%;
    float: right;
    position: relative;
    margin: 0 0 0 5px;
}

您也可以尝试在其中添加clear: left;。

firefox布局问题

2 个答案: