0

私はサイトをステージングしていて、CSSで「background-color」タグを使用して、各ブロック（セクション）が配置されている場所をデバッグしています。「#mainContent」セクションで少し問題が発生しましたが、背景色（デバッグに使用）が表示されない理由がわかりません。

ページコード全体のJSFIDDLEへのリンクは次のとおりです。http：//jsfiddle.net/JGAd6/

そのセクションに関連付けられているコードは次のとおりです。

--HTML-

<div id="mainContentWrapper">

    <div id="mainContent">

        <div id="services">

            <div class="serviceNavLink"><a href="#">Marketing Strategy</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Outsourced Marketing</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw denim 
                fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Market Research</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>          
            </div>

        </div>

    </div>  

</div>

--CSS-

#headerWrapper, #topContentWrapper, #mainContentWrapper, #footerWrapper {
width:100%;
clear:both;
}

#headerContent, #topContent, #mainContent, #footerContent {
width:955px;
margin-left: auto;
margin-right: auto;

padding-right: 1em;
padding-left: 1em;
}


#mainContentWrapper {
border:1px solid #000; /* DEBUG ONLY */
background-color: #61e9a1; /* DEBUG ONLY */
}

#mainContent {
font-size: 1.2em;
background-color:ff0000; /* DEBUG ONLY */
line-height: 1.6em;

padding-top: 1em;
padding-bottom: 1em;
}

#services a:hover {
color: #000;
}

#services p {
width:200px;
font-size: 14px;
}
4

2 に答える 2

2

＃が足りないと思いますか？

background-color:#ff0000; /* DEBUG ONLY */

http://jsfiddle.net/JGAd6/1/

于 2012-12-21T17:56:16.550 に答える
2

表示されていない赤い背景を参照している場合は、CSSを次のように変更する必要があります。

#mainContent {
font-size: 1.2em;
background-color:#ff0000; /* DEBUG ONLY */
line-height: 1.6em;
overflow:auto;
padding-top: 1em;
padding-bottom: 1em;
}

jsFiddleの例

overflow:autoルールを追加#し、背景色の宣言に欠落しているものを挿入しました。

于 2012-12-21T17:59:28.293 に答える