Height different in IE FF Chrome

问题

Good day, after struggling with a problem at my previous post, i entered another problem caused by different heights in web crossing.

Example: http://www.sushitaksteeg.nl/secret/template.html

Download: http://www.sushitaksteeg.nl/secret/Port.rar

If you press on the scroll page button, the page scrolls perfectly in FF but not in Chrome and IE.

I did this by setting the next property in styles.css:

<-- #footer{height:870px;} -->

Again i have searched google and stackoverflow, and tried CSS reset, but didn't work..

Someone any ideas?

EDIT

Mike helped me out with parent.scroll(), it's better now but still I can see a white line between the header and footer in FF and Chrome, IE is showing it good now.

Any more help is appreciated, thank you.

回答1:

I see your JavaScript is using window.scrollBy(). In Chrome/IE, scrolling can be done with parent.scroll().

回答2:

To solve your second problem (with the white line):

remove the <br> tags inside your <div id="content"></div> and add a height of 38px to your content div, so in your css file you get:

#content {
  height: 38px;
}

is that what you wanted? The problem was that the content-div scaled with the data in it. You tried to get the right height using br-tags, but those don't have a standard height and depend on what browser you are using. Specifying the height in css will make it the same height in all browsers (as long as the content fits in it, else it will scale (unsless you also specify the css property overflow: hidden; for the content-div)).

来源：https://stackoverflow.com/questions/5976340/height-different-in-ie-ff-chrome