规范浏览器之间的布局

Question

所以我一直在构建布局，直到现在我还没有在任何非webkit浏览器上测试它。

但是现在我已经在ie8和firefox上测试了它，我发现了一些我想解决的问题。

网站：

• http://thepelican.me/ablehearing/index2.html

首先， Internet Explorer 8。

无论任何兼容模式或关闭javascript，我仍然会遇到所有这些问题。

• 标题中的元素完全关闭。
• 文字'为了轻松听到......'而且数字应该是内联的并且向右浮动。
• <ul class="head">根本没有显示。
• <ul class="mainmenu">
都没有
• 其他一些css样式不会发生

火狐

• 我已经构建了一个布局，在滚动浏览<div id="maincontentbody">后，标题元素滚出视图，<div id="footerblock">滚动到视图中。但是在Firefox中，当你滚动到100％的屏幕高度时它就会卡住。

---

更新 - 解决firefox问题的另一种方法是通过jquery / js，如果我知道用户何时滚动到页面的100％结束然后运行某种功能，可以将滚动从maincontentbody切换到body但我很困惑，因为我如何做到这一点，一旦他们达到100％，我就很难抓住用户，innerHeight没有给我正确的结果。

---

我完全不知道如何纠正这些问题，我们将不胜感激。

Answer 1

我首先导入normalize.css，将所有默认浏览器样式设置为所有浏览器都相同的内容。