Drupal Odyssey is supported by it's readers. When you purchase products or services using the links on this site, we may earn a small commission at no additional cost to you. Learn more
I recently got an email from a client where some of their users reported the layout was blown out in Internet Explorer (IE) 10. I looked at the site in IE 10 and it looked fine...until I clicked the compatibility button in the address bar. Sure enough, the layout was rendered incorrectly. This is because most of my newer designs are not coded for older browsers.
To rectify the problems, I did some research online and was able to come up with a quick fix using a single line of PHP code to set a HTTP header. You can add the following to your PHP files anywhere as long as it comes before any output is sent to the browser.
PHP Code:
header(‘X-UA-Compatible: IE=edge’);
For my client's site, however, this code was not an option since they are using Drupal 7 and there is a whole testing and deployment phase that has to go through an approval process which takes a day or two. But with Drupal designed the way it is, I was able to by-pass that release process by using a Block1. I simply created a new custom block and changed the input format to PHP and added the following for the block code.
Drupal block code:
<?php
drupal_add_http_header('X-UA-Compatible', 'IE=edge');
?>
Once you add this code to the block content, add the block to your top-most region of your theme and save the block. Once saved, you will be taken back to the blocks list. Now, drag your new block so that it is the first block in the region that you assigned it to.
Flush your Drupal cache (if caching is enabled) and clear your browser cache. The compatibility button icon in IE should no longer appear in the browser address bar.
1 This is a great security risk, so be sure only users who know what they are doing and can be trusted have the ability to create content with PHP code.
0 Comments
Login or Register to post comments.