I have a big problem with IE8 where I use the jQuery framework.
What works on Firefox, it doesn't work as well in IE8. I am not even checking IE7开发者_开发技巧 :).
Basically, I have simple animations that show/hide div layers and also that move top/down - left/right some of the div layers. Nothing special, just adding some movement to the page. So when you click on contact, instead of the navigation moving up and showing the contact, the contact moves down and breaks the layout which is not so big problem, but when you press on the client area and than press contact - it totally breaks the layout - BIG problem.
Please help. You can view the site here
+1 Daniel: caused by margin-collapsing issues. Margin collapsing is confusing enough even without the IE issues, and is generally best avoided. Changing the animation to use only paddings and positioning will make it more reliable.
Also, you need to return false
from your event handlers to stop the #
link being followed, causing the browser to jump back to the top of your page.
Finally, give every element that has position
(relative or absolute) an explicit z-index
property to avoid the bug where IE7 defaults them, causing mis-stacking that makes the contact address invisible.
I have noticed that the code relies on the marginTop property to animate elements.
e.g. The handler for the click event of the contact information:
$("#moveContact").click(function(){
Makes use of the marginTop property:
marginTop: "167px",
This is buggy in Internet Explorer, and may result in unexpected behaviour. See this article about margin-top for more information.
This isn't a problem with jQuery, it's to do with the way Internet Explorer interprets the value of margin-Top. I'm not sure if this is the reason why the animation isn't working, but it would be a good place to start looking.
Don't understand what "it totally breaks the layout" means. I only see that in IE the page shocks when you visit the client area. This is due to the height and the "automatic" scrollbar. Having a fixed y-scrollbar is less or more a good workaround.
But clicking the contact link after visiting the client area doesn't show something different as from in FF.
After having a quick glance at the HTML source I can only tell that you really need to get rid of the HTML transitional DTD and to get a HTML strict DTD. It will fix most of the CSS related problems. Learn more here.
Some observations. First, the IE8 behavior on you describe on "#moveContact" is for normal mode only. If you hit "compatibility mode", the broken page icon to the right of the URL box, you get a different (and still wrong) behavior.
Second, the way you include jquery is like this:
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
I would encourage you to supply your own copy of jQuery. You can do that here. I would go for the latest 1.3.2. That may fix your problem. I notice that the release notes for 1.3 show testing against IE7 as the latest IE.
精彩评论