具有负上边距的WebKit问题

Question

我无法使用web-kit进行合作！您可以从图像中看到左栏在FF中的作用，但Web工具包浏览器（Safari和Chrome）会生成第二个图像。我迷失了如何解决这个问题！

Firefox版本

Webkit版本

有关区域的代码

<div class="container" style="margin-top: 30px; position: relative;">
  <section class="row" ><!--id="content" -->
    <div class="content_bckgrnd span9">
      <div class="item-page">
        <p style="text-align: center;"><img src="http://avanti.websitewelcome.com/~ingles/images/demo/store-locations.png" width="531" height="368" alt="store-locations" /></p>
      </div>
    </div>
    <div class="content_bckgrnd span3 ">
      <div class="mod-padding">
        <div class="mod_content ">
          <div class="custom"  >
            <p style="text-align: center;"><strong><img src="http://avanti.websitewelcome.com/~ingles/images/demo/Bldg-Background.jpg" width="150" height="47" alt="Bldg-Background" /><br data-mce-bogus="1" />
              </strong></p>
            <p><strong>Store Search</strong><br />
              To search for an Ingles store near you, type in your zip code or enter your city and state. Click 'Find Stores' to see your results</p>
            <p>Narrow your search by clicking on the options to the right. Search for stores with Pharmacies, Bakeries, or ones that are open 24 hours.</p>
            <p><strong>Your Results Page</strong><br />
              'More Information'- click this to see store locations and to get directions to the store.</p>
            <p>'Weekly Ads' click this to view your stores weekly ads.</p>
            <p><strong>Sort Your Results</strong><br />
              Sort your results by clicking Store, Address, City, State or Zip at the top of the results.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </section>
</div>
<div class="wrapper background" id="module-positions">
  <div class="container" style=" min-height:65px;"> 
    <!-- module-positions -->

    <section class="row"> </section>
    <div class="row">
      <div class="span6"> </div>
      <div class="span6"> </div>
    </div>
  </div>
</div>

JsFiddle

Link to development site for raw code view

Answer 1

您将使用以下内容定义div #HomeTopBckgrnd：

height: 1240px;
margin-top: -360px;

固定的高度会引发麻烦。 为什么不能这样：

<header></header>
<div id="HomeTopBckgrnd"> Your centent here</div>
<footer></footer>

或

<div id="HomeTopBckgrnd">  
<header></header>
<div> Your centent here</div>
<footer></footer>
</div>