Question

Firefox中我的div下方有空白区域，但Chrome中没有。我认为这与我的#body-content-container position: relative;有关bottom: 300px;和<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 & 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 © <script type="text/javascript"> document.write(new Date().getFullYear()); </script> ADU Consulting, All Rights Reserved. Site designed & developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a> <br/> <br/> </div>这与我在Chrome浏览器中寻找的正确定位效果相关，但在Firefox中它会创建一个白色空间。当我摆脱这些线条时，div不会位于FF或Chrome中的正确位置。

以下是代码：

HTML：

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

CSS：

{{1}}

此处还有指向该网站的链接：http://zrrdigitalmedia.com/_ADU/company.html

我超级迷失在这里，任何建议都非常感谢！谢谢！

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;   }
}

Answer 2

FireBug中的一些挖掘引导我：

#body-content-container {
    background-color: #d5b93f;
    bottom: 300px; /* <-- this is the issue, remove it */
    position: relative;
}

firefox中的页面空白但不是chrome

2 个答案: