3

私はウェブサイトを作成していて、結果はChrome、IE9、Opera、Safariで問題ありませんが、Firefoxでは一部のdivが重複しているようです。

ChromeとFirefoxのサイトの非常に縮小されたバージョンのスクリーンショットをそれぞれ次に示します。

http://i.imgur.com/VrYoB93.png?1

http://i.imgur.com/QKCM8KN.png?1

ご覧になって、私が間違ったことを教えていただければ幸いです。これまでの完全なソースはここにあります:

HTML:

<body>
<div class="container">
    <div class="header">
        <a href=""><img src="../Images/test.png"/></a>
        <a href=""><img src="../Images/Twitter1.png" class="headerlink"/></a>
        <a href=""><img src="../Images/YouTube2.png" class="headerlink"/></a>
        <a href=""><img src="../Images/Ask.fm.png" class="headerlink"/></a>
    </div>
    <div> <!-- Links -->
        <table align="center" width="900" cellspacing="0" border="0">
            <td align="center" class="linkbarselected">Example link</td>
            <td align="center" class="linkbar"><a href="">Example link</a></td>
            <td align="center" class="linkbar"><a href="">Example link</a></td>
            <td align="center" class="linkbar"><a href="">Example link</a></td>
            <td align="center" class="linkbar"><a href="">Example link</a></td>
        </table>
    </div>
    <div class="sidebar">
        Example text in sidebar.
    </div>
    <div class="main">
        <div class="content">
            <span style="font-size:2em; color:red;">Good day!</span><p>
            Example text blah blah blah<p>
    </div>
</div>
</body>

</html>

CSS:

}
.container {
    width: 900px;
    margin: 0 auto;
}
.header {
    background: transparent;
    float: left;
}
.linkbar {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #333333;
    color: #FFFFFF;
    height: 15px;
}
.main {
    height: 200px;
    background-color: #CCCCCC;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.content {
    width: 600px;
    float: left;
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 10px 10px;
}
.sidebar {
    float: right;
    width: 230px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.headerlink {
    height: 70px;
    width: 70px;
    border-radius: 10px;
    position: relative;
    bottom: 30px;
}
4

2 に答える 2

1

フロートバグでした。私がしたことを見てください。

jsfiddle.net/pJZ6F/1

于 2013-02-14T13:59:37.740 に答える
0

ヘッダー クラスにプロパティを与える

overflow:hidden;

それが役に立てば幸い!!

于 2013-02-14T13:50:32.393 に答える