With the release of IE9 there was a sigh of relief for the web developers. Finally Microsoft released a browser that promised adherence to W3C standards and the cessation of compatibility headaches. However, not everything is rosy.
If you have a Magento site, you may have already received complaints from customers using the new IE9. The most serious issue is when you only have one payment method enabled in the checkout and this method takes the credit card details directly on your site. In this case, all the fields will stay disabled, preventing the customer from being able to complete the payment.
This is reported here and here and Alan Storm has also posted about it and provided a quick workaround.
The issue comes from the fact that Magento uses an older version of the Prototype JavaScript library for its DOM manipulation.
The quick fix is to fool IE9 to “think” it’s acting as IE8 by adding a custom meta tag to the page header like so:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I personally opted for the .htaccess approach (thanks to the comment by Joe Fletcher) to avoid altering site files and believe it’s slightly more elegant as it can easily be removed when the issue is fixed. For this to work, you must have the Apache Headers module enabled.
Add this to the end of your .htaccess file:
BrowserMatch MSIE best-standards-support Header set X-UA-Compatible IE=8 env=best-standards-support
Originally published on magebase.com. Copyright © 2011 Magebase - All Rights Reserved.
Proud members of the 
Thanks for the htaccess tip- worked for me
Has to be the fastest magento fix ever…
Hello,
it’s been some time since this blog post and I’m not sure how relevant it is now, but there’s another workaround for this problem. If you check the opcheckout.js file (in Magento’s /skin/frontend/ directory) – the problem lies in the “switchMethod” method from the Payment, specifically a line (it’s repeated twice, though
) that selects the elements from the payment form to enable/disable them :
var elements = form.select('input', 'select', 'textarea');It appears that in IE9, when the only payment method is the credit card payment, this variable is empty before the “for” statement that’s supposed to enable the fields. A fix to this is replace those lines with:
var elements = form.select('input').concat(form.select('select'), form.select('textarea'));Hope it helps, cheers.
Thanks for your comment and contribution, Dominik.
While the main and most pronounced issue with IE9 is the payment step, there may be other, more subtle issues with IE9 and the old Prototype library so emulating IE8 for now is a safer strategy in terms of avoiding those issues.
Hi Robert,
We are more or less familiar through linkedin.
Currently I am running through one problem i.e. IE 9 issue.
In my project, I am not able to login or create new account or even admin login in IE 9. Where as all those things are ok with firefix and other browser, only having problem in IE 9.
Can you pleaese suggest me any solution?
I already have tried the one you wrote here but it didn’t work.
Really looking forward to hear from you.
Thanks
Dgent
@dgento What approach did you try? .htaccess or adding the META tag in the site <head> HTML?
What web server are you using? What is you Magento site hosted on, Linux or Windows?
Note that for the .htaccess to work, you need the Apache Header module enabled.
Hi Robert,
Thanks for the prompt response, this what I am actually hoping.
I tried META tag just after title.
I am using apache as web server.
And the platform is Linux.
But still, it is not working. Please suggest me something.
Thanks
I haven’t applied any further fixes for IE9 besides the .htaccess trick. These two options seem to be what everyone recommends to fix the problem with IE9. Are you sure your meta tag appears at the top on EVERY page? You may want to check this post for some more discussion: http://stackoverflow.com/questions/5311882/magento-sites-in-ie9-prototype-bugs
Otherwise, I can’t help you further.
I have copied the view source of home page.
I have tried placing the tag up and down as well..
And about Stackoverflow, I think I already have seen the post where almost same thing is discussed.
thanks
its strange that my copied html tags are not visible in my earlier post. Anyway, I am sure that meta tag is present just after
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
in all pages.
Worked awesomely, thanks
Hi Robert,
htaccess trick worked for me.
Thanks for your great help and post.
Thanks,
Rutul
Dominik’s method worked for me, finally, because none of the forced compatibility methods would work. Thank Dominik!
Hey,
Great website and articles, definitely helpful.
I came across a very wierd issue where a customer mentions that they are not able to add products to the cart using IE9.
Are you able to think of anything that causes this ?
Thank you for your help,
Alexander
Thanks for this, the htaccess one was the only fix I could get to work and by far the easiest.
Hi guys,
please help me to find the location of htaccess.
i having issue in magento admin side product options in ie9
where i can find htaccess file
my problem is magento backend
the htaccess file will be in the directory where magento is. If you are using the cpanel file explorer tick the show hidden dot files, you should then be able to see .htaccess (note the dot, it must have this)
hey imaginarynumber, thanks for your reply.
But i got solution and Upgrade the prototype js, now working fine