html - Firefox 中的页面底部有空白，但 Chrome 中没有

Question

在 Firefox 中我的 div 下方有空白，但在 Chrome 中没有。我认为这与我的 #body-content-container 具有属性 position: relative; 和 bottom: 300px; 有关我在 Chrome 中寻找正确的定位效果，但在 Firefox 中它会创建一个空白区域。当我摆脱这些行时，div 未定位在 FF 或 Chrome 中的正确位置。

代码如下:

HTML:

<div id="body-content-container">
      <div id="body-content"class="row">
        <div class="small-12 small-centered columns">
          <br/>
          <div align="center" id="page-title">COMPANY</div>
          <h1 align="center">About Us</h1>
          <p>ADU Consulting has been developing quality e-learning programs since 2004. It is a training and education company that collaborates with partner organizations in developing, hosting and managing online educational programs based on the individual curriculum and client needs.</p>
          <p>It operates from two regional offices one in New York and another in Northern Virginia, close to the capital city of Washington D.C. The ADU datacenter is also located near the corporate office in Virginia.</p>
          <p>We:</p>
          <ul>
            <li>Develop e-Learning courses</li>
            <li>Build in-campus and online blended programs</li>
            <li>Create Integrated Assessment and Evaluation</li>
            <li>Provide white-labeled hosting services</li>
          </ul>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <p>ADU business is divided into two areas: <span style="font-family:FuturaStd-Heavy;">e-Learning Consultancy</span> for client organizations and running its <span style="font-family:FuturaStd-Heavy;">International Maritime College</span> where it offers a number of Certificates, College Primers and Vocational Skill Development programs, aimed primarily at the maritime industry. These courses focus on training the seafarers and the shore based employees within the shipping business.</p>
          <p>ADU fills the gap between traditional education and the needs of people today. Interactive courses taught by experienced professionals help students keep pace with changing industry demands in addition to providing a holistic and need-based education. Our Instructors are picked from around the world with the majority from the United States; they have the highest professional and academic backgrounds that befit the purpose of industry ready education and training.</p>
          <h1 align="center">Our Purpose</h1>
          <p>We believe that online education's role is to compliment the "best" practices in education. It must support instructors to teach a larger student body and make learning possible based on individual learning needs. With this in mind, our integrated learning platform is equipped with necessary tools in helping the Instructors create a self-paced learning environment.</p>
          <h1 align="center">Technology</h1>
          <p>The LMS software and courses system is housed in a tier 1 datacenter that has a redundant firewall, switches and servers for complete data security. This hosted delivery model provides scalability, reliability and eliminates technological burden on client resources.</p>
          <h1 align="center">Course Development</h1>
          <p>ADU Consulting's content creation and delivery platforms are tied together such that it allows faculty to modify, or enhance contents to fit their unique teaching style. Thus a course developed for an organization can be further customized by the Instructor. In addition, since the world of online resources is expanding every minute, Instructors are able to link external content or add other resources through this platform. The student assessment is an integral part of the learning and evaluation process: the platform is configured with a question bank and a multi-faceted assessment system.</p>
          <h1 align="center">Support</h1>
          <p>In order to keep pace with the changing landscape of online learning ADU Consulting's platform is constantly updated in keeping with such advances. We are committed to support our partners both from technical management and pedagogical viewpoint.</p>
          <h1 align="center">Course Delivery</h1>
          <p>Courses are delivered to students in an asynchronous mode that allows students to learn at their own pace and allows flexibility when they want to study; Collaboration and communication with faculty is done in a synchronous mode through online video conferencing. The teacher-centric approach helps to consolidate and maximize the learning outcome.</p>
          <h1 align="center">Course Creation &amp; Quality Control</h1>
          <p>ADU Consulting has an e-learning Quality Management Process that looks at various quality attributes in a course that must be meet to meet the ADU performance criteria. This is an internal quality audit system that must be satisfied before a course can be put on line for client review. The QA task is done from Virginia.</p>
          <p>ADU Consulting’s courses are built at Chennai, India with an affiliated organization that maintains a large content development team including subject matter experts, instructional designers, graphic designers, Flash and other programmers, voice-over specialists etc.</p>
          <p>The development is an iterative process and is only signed off once the user client is fully satisfied with the intended and agreed quality standard.</p>
          <h1 align="center">Collaberation Projects</h1>
          <p>ADU Consulting collaborates with partner organizations in developing, hosting and managing online educational programs based on individual curriculum and client needs and this may take any of the following project types:</p>
          <ul>
            <li>Develop e-Learning Courses</li>
            <li>Build in-campus and online blended programs</li>
            <li>Create Integrated Assessment and Evaluation</li>
            <li>Provide white-labeled hosting for e-learning services</li>
          </ul>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>

          <div align="center">
            <h1>Contact Us</h1>
            <span style="font-family:FuturaStd-Heavy;font-size:20px;">ADU Consulting Services</span>
            <br/>
            <p>6 Pigeon Hill Drive Suite 230<br/>
            Sterling, VA 20165<br/>
            United States of America</p>
            <p>Email: info@adu.us.com</p>
            <p>Telephone: (804) 205-1210<br/>
            Fax: (703) 738-7723</p>
          </div>
        </div>
      </div>
      <div align="center" id="footer">
        <br/>
      Copyright &copy; <script type="text/javascript">
      document.write(new Date().getFullYear());
      </script> ADU Consulting, All Rights Reserved. Site designed &amp; developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a>
      <br/>
      <br/>
    </div> 

CSS:

#body-content-container{
    background-color: #d5b93f;
    position: relative;
    bottom: 300px;
}

还有一个指向该站点的链接:http://zrrdigitalmedia.com/_ADU/company.html

我在这里 super 迷路，非常感谢任何建议!谢谢!

Answer 1

尝试更改#body-content-container 的底部值。

#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px;  /* change 300px to -15px */
}

在 Firefox 和 Chrome 上都进行了测试。

或者，您可以针对 Mozilla Firefox 并添加负边距底部 到#body-content-container:

@-moz-document url-prefix() {
    #body-content-container {
    background-color: #d5b93f;
    position: relative;
    bottom: 300px;  
    margin-bottom:-320px;   }
}