How to Fix Cross-Browser Compatibility Issues

Your website will be easy to view at the correct size and style for all the many new different media devices and screen sizes that more and more people are now using to browse the internet. But if you are reading this blog post, you are probably already aware of the value and usefulness of responsive web design.

Specifically, for the purposes of this tutorial, you should know that it is equally important for your design to function in all browsers.

The first line of code you should write in your styles once you have a container for your image (img) is:

img {
 max-width:100%;
}

 

This rule forces the image’s width to match the width of its container and it can also be applied to most rich media elements on your site such as video or sliders. All browsers support max-widthexcept for Internet Explorer 6 and below. Now, the necessity of having your website work in IE6 isn’t very high these days but it’s good to know the way to fix it.

The Easy Way:

img.full,
.main img {
 width:100%
}

 

In this example we are targeting certain images or specific containers where you know you’ll be dealing with oversized media, so your smaller sized media stays intact instead of becoming an eyesore.

The last issue we need to take a look at is not really a browser-specific issue as much as a platform-specific one. Windows doesn’t do a very good job when you try to resize images via CSS, they tend to develop artifacts, impacting their quality. This bug only affects IE7 and lower as well as Firefox 2 and lower on windows (It seems to have been fixed in Windows 7). Unfortunately there is no reliable fix for Firefox, but IE does have a toggle.

The Not So Easy Way:

.logo { background: none;
 filter: progid:DXImageTransform.Microsoft.
 AlphaImageLoader(src="/path/to/logo.png",
 sizingMethod="scale");
}

 

AlphaImageLoader is one of Microsoft’s proprietary CSS filters. Applying this rule to an imagedramatically improves rendering quality in IE, matching every other browser’s quality. But this leaves us one last step to take care of.

What AlphaImageLoader actually does is it creates an object that sits between the image and its background. It replaces the src attribute of the img element with a transparent “spacer” GIF that will be resized in order to match the original element. Sadly, this causes a bug for our max-width:100% / width:100% approach because the GIF has its own physical dimensions; it won’t scale properly within its container. So, you will need the following script to help you out with that.

Here’s How It’s Not So Easy:

var imgSizer = {
 Config : {
 imgCache : []
 ,spacer : "/path/to/your/spacer.gif"
 }
 ,collate : function(aScope) {
 var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
 if (isOldIE && document.getElementsByTagName) {
 var c = imgSizer;
 var imgCache = c.Config.imgCache;
 var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
 for (var i = 0; i < images.length; i++) {
 images.origWidth = images.offsetWidth;
 images.origHeight = images.offsetHeight;
 imgCache.push(images);
 c.ieAlpha(images);
 images.style.width = "100%";
 }
 if (imgCache.length) {
 c.resize(function() {
 for (var i = 0; i < imgCache.length; i++) {
 var ratio = (imgCache.offsetWidth / imgCache.origWidth);
 imgCache.style.height = (imgCache.origHeight * ratio) + "px";
 }
 });
 }
 }
 }
 ,ieAlpha : function(img) {
 var c = imgSizer;
 if (img.oldSrc) {
 img.src = img.oldSrc;
 }
 var src = img.src;
 img.style.width = img.offsetWidth + "px";
 img.style.height = img.offsetHeight + "px";
 img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
 img.oldSrc = src;
 img.src = c.Config.spacer;
 }
 // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
 ,resize : function(func) {
 var oldonresize = window.onresize;
 if (typeof window.onresize != 'function') {
 window.onresize = func;
 } else {
 window.onresize = function() {
 if (oldonresize) {
 oldonresize();
 }
 func();
 }
 }
 }
}

 

This script will find any images in your document and create a series of flexible, high-quality AlphaImage Loader objects for them.

How to Fix Cross-Browser Compatibility Issues