Dealing with IE

If you ask any web developer what they think about IE, they will answer it sucks. The reason is quite simple, you need to adapt the page to work on it. Besides, it doesn’t follow any standard well and have many bugs.The worst part of all is that at least one third of the Internet users use it.

In the past months i had been creating a web page and solved several problems regarding IE. Here are some tips:

  • css3 not working well on some IEs

    The best solution will be using different style sheets. Simulate some of css3 feature in css2. For example the border-radius can be solved using margin, padding and background attributes.

    If you just want to use the same style sheet for all, this will be pretty helpful: CSS3 PIE. But it won’t be as nice as the first one.

  • js issues

    Use a javascript framework and libraries well tested in all browsers like jQuery. It will solve a lot of the problems.

  • HTML5 tags

    This js library will help you a lot: Modernizr.

    For example if you want to simulate placeholder attribute, this code will save you:

    if (!Modernizr.input.placeholder){
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass(tag);
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
        $('[placeholder]').parents('form').submit(function () {
            $(this).find('[placeholder]').each(function () {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            })
        });
    }
    

    The best you can do is trying to not use HTML5. It have tons of bugs on IE. Some useful links:

    https://code.google.com/p/html5shiv/
    http://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml

  • Testing

    The best way will be using VMs: http://www.microsoft.com/en-us/download/details.aspx?id=11575
    Other methods changing the browser mode and document type on IE: http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx

There will be one day when IE work as other browsers. For now i hope this save some people.

Advertisements