0

別のdivタグ内にネストされている拡張divタグに問題があります。IEでは、拡張divタグは、必要に応じて外側のdivタグの外側に拡張されます。ただし、Chromeでは、内側のdivタグが展開されると、外側のdivタグにスクロールバーが表示されます。IEと同じように動作させたいのですが、スクロールバーは表示されず、コンテンツはページの本文のコンテンツとオーバーラップします（結局のところ、これは単なるショッピングカートウィジェットです）。

これが私のhtmlページのコードです。

<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
    <div id="mastheadcontent">
        <div id="googlecart-widget" style="float:right;"></div>
    </div>
</div><!-- End Masthead -->

これが私のCSSです：

#mastheadcontainer {
width: 100%;
margin: 0 auto;
background-color: #dcb;
border-bottom:10px solid #0066CC;
/*margin-bottom:20px;*/}


#masthead {
text-align: right;
width: 960px;
margin: 0 auto;
overflow: auto;}


#mastheadcontent{
width:956px;
height:122px;
margin:0 auto;
/*background-image:url('../images/bk-masthead.jpg');*/
/*background-repeat:no-repeat;*/
background-color:#dcb;}

クロームで表示したときのIEの動作と同様に内部divタグが拡張されるようにするための推奨事項はありますか？

ありがとうマイク

4

2 に答える 2

0

垂直スクロールについて話していて、＃mastheadcontent ID内のコンテンツが、122ピクセルを超えるとスクロールバーを表示していると思います。

最終結果がどのようになるかは正確にはわかりませんが、探しているものに応じて次のように提案します。

  • コンテナの高さを削除して、divがその中のコンテンツに合うように拡張されるようにします。コンテナ内でフロートを使用しているため、いくつかのメソッドを使用してコンテナをクリアする必要があることに注意してください。そのうちの1つは、プロパティ「overflow：auto;」を使用しています。#mastheadcontentで。フロートのクリアに慣れていない場合は、概念を理解するのに役立つWeb上の多数のガイドを参照することをお勧めします。

  • または、コンテンツを境界を越えて拡張したいが、コンテナ自体は拡張したくない場合は、プロパティ「overflow：visible;」を使用することをお勧めします。

いずれにせよ、問題の解決策を得るためにオーバーフロープロパティを試してみたいと思うかもしれませんが、Webには、問題を解決するための情報がたくさんあります。

お役に立てれば。

于 2012-04-07T05:21:51.420 に答える
0

私は自分の質問に答えました。これが私のサイトの現在のdiv構造です：

<div id="main>
<div id="mastheadcontainer"><!-- Begin mastheadontainer -->
<div id="masthead"><!-- Begin Masthead -->
<div id="mastheadcontent">
<div id="googlecart-widget" style="float:right;"></div>
</div>
</div><!-- End Masthead -->   
<div id="bodydiv">       
</div><!-- End bodydiv -->
</div><!-- End main -->

Chromeのbodydiv要素のコンテンツの上にgooglecart-widgetを展開するには、mastheadcontainerのすべてのdiv要素とmastheadcontainer要素にoverflow：visibleを追加する必要がありました。私の新しいHTMLdiv構造は次のようになります。

<div id="main>
<div id="mastheadcontainer" style="overflow:visible;"><!-- Begin mastheadontainer -->
<div id="masthead" style="overflow:visible;"><!-- Begin Masthead -->
<div id="mastheadcontent" style="overflow:visible;">
<div id="googlecart-widget" style="float:right; overflow:visible;"></div>
</div>
</div><!-- End Masthead -->   
<div id="bodydiv">       
</div><!-- End bodydiv -->
</div><!-- End main -->

これは、すべての要素のオーバーフロープロパティを設定するのは少しやり過ぎかもしれませんが、機能しました。

于 2012-04-07T15:20:12.377 に答える