3

Chrome で 3 つのアイテムをフロートさせるのに問題があります。基本的には、左側に画像があり、右側に 2 つの div が浮かんでいます。問題は、右に浮いたダイブが画像の下部に落ちていることです。これは Chrome の既知の問題ですか?どうすれば修正できますか? IE、Opera、Safari、Firefox では問題ないようです...

これはコードです：

    <body>
    <div id="container">
        <div id="header">
            <img src="image1.gif" width="320" alt="Logo"/>
            <div id="social">
                <img src="images/facebook_logo.png" alt="Facebook logo" width="25" />
                <img src="images/twitter.png" alt="Twitter logo" width="25" />
            </div>

            <div id="review">
        <img src="roundel1.gif" alt="Click here!" style="float:left; width:50px;"/><div>
                    FREE service!
                </div>
            </div>
</div>
</div>
</body>
</html>

そしてCSS：

* {
  margin:0;
  padding:0;
}

body    {
    background-image:url(../images/greenbg.png);
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:120%;
    }
#container           {
    margin-left:auto; 
    margin-right:auto; 
    width:960px;
    background-color:#FFF;
}
#header {
    height:100px;
}
#header-image   {
    float:left;
}
/* flyout boxes */

#review {
    float:right;
    width:216px;
    border-style:solid;
    border-width:2px;
    height:63px;
    margin-right:20px;
}
#social {
    float:right;
    width:136px;
    border-style:solid;
    border-width:2px;
    height:48px;
    }
4

2 に答える 2

10

このトピックを見つけた人にとって、私は複雑なレスポンシブデザインで同じ問題を抱えていました.2つの等しいサイズの左側にフローティングされたdivがあり、右側のdivは右側のdivよりも20〜30px低くオフセットされます.

他のすべてのブラウザー (IE9、IE8、および IE7 を含む) で期待どおりに div が表示されるため、これは Chrome のバグのようです。

問題:これら 2 つの div の親ラッパーに配置された上部マージン

margin-top: 30px;

解決策:代わりにパディングを使用してください。MSIE > 6、Opera、Chrome、FF、Safari で動作します

padding-top: 30px;

これはかなり面倒だったので、これでフラストレーションと時間を節約できることを願っています。

于 2013-02-26T17:20:57.393 に答える
2

最終的にクロムで開発者ツールを開き、cssレビューのコードを調べてルールをdiv無効にしてから再度有効にすることで、問題を再現することができました。floatこれはあなたが問題を取得する方法ですか？もしそうなら、解決策はfloatingへの画像かもしれませんleft。私の場合、それは解決策を作りました。そうでない場合は、画像を提供していただけると助かります。ありがとう

于 2012-08-09T22:27:07.963 に答える