css - 标题标签背景颜色扩展到 iPad 上的列

Question

我在网站上工作时遇到了 IPAD(可能还有 iPhone)上的 CSS 问题。

基本上在赞助商页面上:http://www.tcsdesignreno.com/fsw/?page_id=1149 .我在不同的部分后面得到了红色背景。我认为这与具有红色背景的 H3 标签有关。

同样的事情发生在这里:http://www.tcsdesignreno.com/fsw/?page_id=1165 .他们都在使用 Wordpress 中的 Easy Columns 插件。

这是一些示例 HTML

<h3 class="sponsor-hdr" style="text-align: center;">Advertising and Media Partners</h3>
<div class="ezcol ezcol-one-third">
<p><a title="Fire Rescue 1" href="http://www.firerescue1.com/" target="_blank"><img class=" size-full wp-image-1238 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/161_FR1_FC_Logo_Stacked.jpg" alt="FireRescue1.com, Fire Chief" width="161" height="93" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>FireRescue1 / Fire Chief</strong><br />
200 Green St.<br />
2nd Floor<br />
San Francisco, CA 94111<br />
Phone: 415-962-5912</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third">
<p><a title="CSFA" href="http://www.csfa.net/" target="_blank"><img class=" size-full wp-image-1233 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_LatestCSFA-3_5_x_2_75_Logo.jpg" alt="California State Firefighters' Assn " width="116" height="91" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>California State Firefighters&#8217; Assn </strong><br />
2701 K Street, Suite 201<br />
Sacramento, CA  95816<br />
Phone: 800-451-2732<br />
Fax:     916-446-9889</p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Program Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="FPAN" href="http://www.fpanevada.org/" target="_blank"><img class="aligncenter size-full wp-image-1232" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_FPAN_Logo_Color.jpg" alt="FPAN" width="116" height="116" /></a></div>
<div class="ezcol ezcol-two-third ezcol-last">
<p>In appreciation to:<br />
<strong>Fire Prevention Association of Nevada</strong><br />
<strong>National Code Services Association</strong></p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Tote Bag Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="Burton's Fire" href="http://www.burtonsfire.com/" target="_blank"><img class="aligncenter size-full wp-image-1236" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_BURTONS_FIRE_INC_LOGO.jpg" alt="BURTONS FIRE" width="158" height="54" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>Burton&#8217;s Fire</strong><br />
1301 Doker Avenue<br />
Modesto, CA  95351<br />
209-544-3161</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third"><a title="Waterous" href="http://www.waterousco.com/" target="_blank"><img class="aligncenter size-full wp-image-1237" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_WaterousLogoSm.jpg" alt="Waterous" width="155" height="29" /></a></p>
</div>

CSS:

h3 {
    background-color: #990000;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    max-height:92px;
}

这是一张图片:

谁能看出为什么这些部分显示为红色？对于我的生活，我似乎无法弄清楚。

Answer 1

看起来您的花车没有清除。您可以将其添加到您当前的样式中:

.singlepost .content-entry h3 { 
  clear: both;
}