Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How to Target IE6, IE7, IE8, IE9, IE10 and IE11

by Durodola Ridwan | Friday, October 24, 2014 | | 92 Comments

It gets frustrating when different versions of Internet Explorer displays our web pages differently due to the inconsistent rendering engine.

Sometimes, we might just think tweaking our code to render the same across different browser version is not that important, but that's a wrong idea. Many users don’t care what browser they are using as long as it browses the internet. Sadly, most of these users are on IE7, IE8, and IE9 because that is what comes installed on their PC. Luckily there are now several ways of targeting IE.



Conditional Comments

The simplest and almost the best way to target Internet Explorer is through conditional statement. The basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.

Example:

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->
<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->
<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->
<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if gte IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->


Note the special syntax:

  • <!--[if IE]> = all IE version
  • <!--[if IE9]> = IE9
  • <!--[if lt IE9]> = less than IE9
  • <!--[if lte IE9]> = less than or equal to IE9
  • <!--[if gt IE6]> = greater than IE6
  • <!--[if gte IE6]> = greater than or equal to IE6
  • <!--[if !IE]> -->  = content should appear in all browser except IE

Also, note that conditional comments were disabled in IE10+, so IE10 and up will not understand the test.


Conditional HTML Class

Another great way of targeting IE is to add a browser-unique class to the <html> element. Basicially, it checks if it is IE, then add a class to the html tag. So to target specific IE version, simply use the IE class as the parent selector (eg. .ie6, .ie7).

Example:

<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<!--[if !IE]><!--><html lang="en"><script>if(/*@cc_on!@*/false){document.documentElement.className+='ie10';}</script><!--<![endif]-->

As you might have noticed from the last line. Since IE10 does not support conditional statements, you can apply an ie10 class to the <html> element.

Then in your CSS you can strictly access your target browser, like so:

.ie6 {
    border:1px solid blue;
}
.ie7 {
    border:1px solid red;
}


CSS Hacks

With CSS hacks, you can target any IE version. Though, this method is not recommended because they are not valid CSS syntax. But if you only need to change one or two properties to make IE happy, then I don't see any harm in using the underscore or asterisk hack directly in your stylesheet. However, if there are a handful of changes, be sure to use conditional comments.

The logic is simple:

  • IE9, IE8 or below: to target Internet Explorer 9, 8 and below in CSS, append a backlash and 9 (\9) to the end of the style you want to apply.
  • IE7 or below: add an asterisk (*) before the CSS property.
  • IE6: add an underscore (_) before the property.

Example:

/* IE6 */
body { _color: blue; }

/* IE7, IE6 */
body { *color: blue; } /* or #color: blue */

/* IE9, IE8, IE7, IE6 */
body { color: blue\9; }

/* IE8, IE7 */
body { color/*\**/: blue\9; }

/* IE7, IE6 -- acts as an !important */
body { color: blue !ie; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}


The last CSS media query rules which target IE10 and IE11 is a valid CSS rule. Here’s the technique: we create a media query using -ms-high-contrast, in which you place your IE10+ specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE10+), it will only be parsed in Internet Explorer 10 and greater.

Hacking your CSS may seem a quick fix for getting your styles to work across browser types, but it can harm sometimes. Imagine if the new release of Firefox or Safari support properties prepended with the asterisk (*) hack. They probably never would for compatibility reasons, however, if they did, that could potentially ruin a portion of your layout. That's why I recommend the first two options.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

92 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Replies
  2. This was super helpful. Just saved me on a project at work. Stupid lack of conditional comment support. >.>

    ReplyDelete
  3. Packers and movers Noida @ http://www.noidapackers.co.in/
    packers and movers noida sector 12 @ http://www.noidapackers.co.in/
    packers and movers noida sector 53 @ http://www.noidapackers.co.in/
    packers and movers noida sector 51 @ http://www.noidapackers.co.in/
    packers and movers noida sector 50 @ http://www.noidapackers.co.in/
    packers and movers noida sector 49 @ http://www.noidapackers.co.in/
    packers and movers noida sector 41 @ http://www.noidapackers.co.in/
    packers and movers noida sector 39 @ http://www.noidapackers.co.in/
    packers and movers noida sector 62 @ http://www.noidapackers.co.in/
    packers and movers noida sector 61 @ http://www.noidapackers.co.in/

    ReplyDelete
  4. Replies
    1. كنت تبحث عن شركة نقل عفش بالرياض لنقل عفش منزلك نيجة للسفر او الهجره او الانتقال فان شركة البراك تعد من اهم شركات نقل عفش بالرياض لها سمعتها الكبيره فى اعمال نقل وتخزين الاثاث فهى ايضا
      شركة تخزين عفش بالرياض لتخزين الاثاث لفترات اذا منت بحاجه الى تخزين الاثاث . شركة البراك
      شركة تخزين عفش بالرياض تمتلك العماله المدربه فى اعمال فك وتركيب الاثاث وكذلك تغليف الاثاث حتى لا يتعرض الى خدوش او كسور اثناء عمليات النقل المختلفه
      كما اننا نمتلك شركة نقل عفشوكافة فروع المملكه كما ان الشركه ليها اسطول كبير جدا من سيارات نقل الاثاث المختلفه وبكافة الاحجام كما تمتلك اسعار مناسبه جدا لكل حجم من احجام الاثاث لذا اذا كنت تبحث عن شركات نقل عفش بالرياض تمتلك عماله مدربه ولها القدره على نقل الاثاث من والى اصعب المناطق او نقل الاثاث خارج المملكه فان شركة البراك تعد خيارك الاول فى خدمات نقل العفش وتخزينه وكذلك شراء الاثاث المستعمل
      عند طلب خدمان شركة نقل عفش بالرياض فان الشركه تقوم بارسال مندوب لمعاينه الاماكن التى ستم نقل الاثاث منها واليها وكذلك حجم الاثاث ومداخل ومخارج الاماكن كما يقوم بتحديد حجك الاثاث للاتفاق مع الاسعار المناسببه لخدمات نقل العفش . بعد ذلك سيقوم بارسال فريق عمل كمنا بتحديده نتيجة لكمية الاثاث التى تمت معاينتها من قبل مندوب الشركه
      يقوم العمال باعمال الفك والتغليف حتى يتم ضمان الاثاث اثناء عملية النقل وعدم تعرضه الاثاث لاى مشاكل اثناء تحرك وانتقال السياره كذلك اثناء التحميل الامر الذى يتطلب استخدام بعض الانواع المختلفه من المغلفات التى تساعد على تغليف الاثاث باحكام وعدم تعرضه لاى احتكاك اثناء الانتقال من مكان الى اخر
      فى افضل لم تجد الا موسسة البراك تهتم دائمة بمواكبه كل جديد من الادوات والمعدات ومن السيارات التى تساعدنا على تقديم خدمات نقل عفش بطريقه احترافيه تمنع حدوث اى مشاكل اثناء عملية التحميل والنقل والتركيب فى موسسة البراك نراعى دائما طلبات العملاء وتقديم كافة النصائح اللازمه التى تساعدنا على اتمام عملية النقل بكل سهوله ويسر
      دائما ما تبحث عن اارقام شركات نقل عفش بالرياض فى صفحات الانترنت دون معرفه مسبقه عن خدمات الشركه التى تقوم بطلبها لذا ننصح دائما بالبحث عن توصيات عملاء سابقين ومدى ثقة العملاء فى الشركه وفى الخدمات التى تقوم بها الشركه ومن الخدمات اضا التى تشتهر بها شركة البراك ايضا ارقام شركة نقل عفش بالرياض وتقدم خدمات اخرى باضافة لفك وتركيب الاثاث اثناء نقل الاثاث

      Delete
  5. Like i only know that the latest was IE8 haha! too old for new updates in technology



    Heard about Olympia Kitchen Remodel

    ReplyDelete
    Replies
    1. اذا كنت تبحث عن

      شركة مكافحة النمل الابيض بالاحساء

      شركة مكافحة النمل بالاحساء

      شركة مكافحة الصراصير بالاحساء

      شركة رش دفان بالاحساء

      شركة رش مبيدات حشريه بالاحساء

      شركة رش مبيد حشرى بالاحساء
      شركة رش حشرات بالاحساء

      كما تقدم
      شركة كشف تسربات المياة بالاحساءالبراك حلول مبتكره جديده وغير مكلفه فى عمليات
      كشف تسربات المياة بالاحساء من حمامات وصرف المطابخ والكشف على المكان المصاب واكتشافه بدون اى تكسير وذلك باستخدام احدث الادوات المصنع خصيصا لكشف تسربات المياه والقضاء على المشكله دون حدوث اى مشاكل مستقبليه من شانها الاضرار بالبنيه الخاصه بمنزلك
      كما نقدم الشركه العديد والعديد من خدمات عزل الاسطح والخزانات فالبراك
      شركة عزل فوم بالاحساء باستخدام اجود انواع العزل المختلفه وكل ذلك فى وقت قياسى مع جهاز واحترافيه فقط عليك التفكير وعلى عمال شركة البراك التنفيذ بالدقه وبالمواصفات المطلوبه والتى نسعى دائما ان نكون من الشركات المميزه فى المجال التنظيف وكشف التسربات والعزل . ففى شركة عزل خزانات بالاحساء نقوم بتنظيف خزانات المياه جيدا وعمل عزل محكم وخاص للحفاظ على الخزانات من الصدا وكذلك حماية المياه من التلوث من خلال شركة عوازل بالاحساء والبراك نسعى لخزانات نظيفه ونقيه وكذلك شركة عزل اسطح بالاحساء للحفاظ على سطح من منزلك فى حالة الامطار وتعرض للتشققات وغيرها

      Delete
  6. Demonstrat to them whole your products which must be moved to the new destination.

    Packers and Movers Bangalore @ http://www.11th.in/packers-and-movers-bangalore.html
    Packers and Movers Noida @ http://www.11th.in/packers-and-movers-noida.html
    Packers and Movers Ghaziabad @ http://www.11th.in/packers-and-movers-ghaziabad.html
    Packers and Movers Chennai @ http://www.11th.in/packers-and-movers-chennai.html

    ReplyDelete
  7. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people
    - fnaf

    ReplyDelete
  8. Thanks a lot for sharing. To get all the latest bollywood news,gossips and rumors,just check
    imo beta apk

    ReplyDelete
  9. To join the free games you go here. It will have a lot of great games for you that
    gun mayhem 3 | can your pet 2
    learn to fly 3 | happywheels
    tank trouble 3

    ReplyDelete

  10. http://getpackers.com/packers-and-movers-bangalore/
    http://getpackers.com/packers-and-movers-bangalore-to-hyderabad/
    http://getpackers.com/packers-and-movers-bangalore-to-kerala/
    http://getpackers.com/packers-and-movers-bangalore-to-gurgaon/






    ReplyDelete
  11. The Pangu is a Chinese programming team in the iOS community that developed the Pangu jailbreaking tools.These are tools that assist users in bypassing device restrictions and enabling root access to the iOS operating system.This permits the user to install applications and customizations typically unavailable through the official iOS App Store.
    Now to get Pangu Jailbreaking tools are so easy or free from CydiaNerd you can get Latest Pangu iOS 10 Jailbreak.

    ReplyDelete
  12. For Diwali Gifts,Visit us at:
    Diwali Chocolates Hampers @ http://www.diwaligiftz.com/diwali-chocolates-hampers.php
    Diwali Sweet Hampers @ http://www.diwaligiftz.com/diwali-sweets-hampers.php
    Diwali Dry Fruits Hampers @ http://www.diwaligiftz.com/diwali-dryfruits-hampers.php

    Diwali gift hampers # http://www.diwaligiftz.com/diwali-gift-hampers.php
    Diwali gifts for corporates # http://www.diwaligiftz.com/diwali-gifts-for-corporates.php
    send diwali gifts online # http://www.diwaligiftz.com

    ReplyDelete
  13. If you've got an iPhone 5 (or later, an iPad 4 (or later), an iPad mini 2 or later or a sixth-gen iPod touch, your device is officially rated as iOS 10-compatible, and you can update to iOS 10 for free from Cydia Nerd.you can get iOS 10 Download link from CydiaNerd.

    ReplyDelete

  14. NUMPANG PROMO BOSKU
    kunjungi website kami di http://bit.ly/2c8G2QW
    promo cash back 10% dari nilai kekalahan anda
    syarat ketentuan:
    1. promo dihitung dari hari senin jam 00.00 wib sampai dengan minggu pada jam 23.59wib
    2. promo cashback nilai kekalahan anda di hitung berdasarkan nilai deposit dan nilai wd anda selama seminggu
    3. promo dapat berakhir sewaktu waktu tanpa pemberitahuan lebih lanjut
    4. pembelian aksesoris tidak termasuk dalam promo
    5. promo cashback akan di berikan setiap hari senin
    6. promo tidak berlaku jika terjadi kecurangan dari pihak player
    7. keputusan kami adalah mutlak dan tidak bisa di ganggu gugat

    ReplyDelete
  15. اهم شركات كشف تسربات المياه بالدمام كذلك معرض اهم شركة مكافحة حشرات بالدمام والخبر والجبيل والخبر والاحساء والقطيف كذكل شركة تنظيف خزانات بجدة وتنظيف بجدة ومكافحة الحشرات بالخبر وكشف تسربات المياه بالجبيل والقطيف والخبر والدمام
    شركة تنظيف خزانات بجدة
    شركة مكافحة حشرات بالدمام
    شركة كشف تسربات المياه بالدمام

    ReplyDelete
  16. اهم شركات نقل العفش والاثاث بالدمام والخبر والجبيل اولقطيف والاحساء والرياض وجدة ومكة المدينة المنورة والخرج والطائف وخميس مشيط وبجدة افضل شركة نقل عفش بجدة نعرضها مجموعة الفا لنقل العفش بمكة والخرج والقصيم والطائف وتبوك وخميس مشيط ونجران وجيزان وبريدة والمدينة المنورة وينبع افضل شركات نقل الاثاث بالجبيل والطائف وخميس مشيط وبريدة وعنيزو وابها ونجران المدينة وينبع تبوك والقصيم الخرج حفر الباطن والظهران
    شركة نقل عفش بالرياض
    شركة نقل عفش بالطائف
    شركة نقل عفش بالدمام
    شركة نقل عفش بجدة
    شركة نقل عفش بمكة
    شركة نقل عفش بالمدينة المنورة
    شركة نقل عفش بينبع
    شركة نقل عفش بالخرج
    شركة نقل عفش بالقصيم

    ReplyDelete
  17. Golden 1 Center, the Sacramento Kings' new $557 million arena, has set a new benchmark for NBA facilities.At the main entrance on the arena’s northwest side, five towering glass doors fold up garage-style — together standing 50 feet tall and 150 feet wide — to create the NBA’s first indoor-outdoor venue.“California is all Golden State Warriors Jerseys about indoor-outdoor living,” Kings owner Vivke Ranadivé told SportsBusiness Journal. “The architects presented many different ideas and when they showed Stephen Curry Jerseys me that idea, that was it. That was something that became the exclamation point for the arena.”Team officials are working NBA Jerseys closely with the NBA to develop guidelines for keeping the doors open for Kings games. As it stands, there are Kyrie Irving Shoes no league rules for playing games in an indoor-outdoor setting.For the Kings’ two preseason games at Golden 1 Center, the http://www.cheapnbajerseyscustom.com team kept the doors open for the first half and closed them for the second half. In both situations, the L.A. Clippers Jerseys team recorded temperature and humidity levels every 15 minutes and submitted the data to the league office.
    Nobody should've needed Paul George Jerseys a reason to watch Russell Westbrook play basketball — not ever, and certainly not this season.He, alone, is reason enough; Kevin Durant Jerseys it seems counterintuitive, but the Westbrook-centric Thunder are more compelling than their previous iteration. Kevin Durant is gone, and OKC Kevin Durant Shoes will be worse for it, but if nothing else, we knew what he and Westbrook looked like together. We knew Lebron James Jerseys

    ReplyDelete
  18. It has always been my belief that very good writing such as this takes researching and also talent. It’s very apparent you have performed your homework.Good job!Also visit my web blog …
    Packers And Movers Bangalore
    Packers And Movers Bangalore

    ReplyDelete
  19. Thinking of an iOS 10 Jailbreak? Well, you should be! Yalu Jailbreak has been released for iPhone and iPad devices.


    You can now jailbreak iOS 10 using the new tool on Windows or MacOS to get Cydia installed on your iOS devices.

    ReplyDelete

  20. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write.
    Thanks for sharing !
    tanki online 2 | game 2048 online

    ReplyDelete
  21. aharashtra board will publish the ssc result 2017 soon

    ReplyDelete
  22. The maharashtra hsc result will be available on the official website that is www.mahresult.nic.in.

    ReplyDelete
  23. Students can check TN HSC Result at official website.

    ReplyDelete

  24. In your blog I was happy to see your article, better than last time, and have made great progress, I am very pleased. I am looking forward to your article will become better and better.
    hotmail login | red ball | 192.168.1.1

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. Click here to get HSC Result Gujarat at official website.

    ReplyDelete
  27. Click here to get HSC Result Gujarat at official website.

    ReplyDelete
  28. Its really amazing blog with very much helpful information, thank you so much for writing this great blog here for us.

    Agarwal Packers and Movers
    Packers and Movers in Delhi
    Packers and Movers Bangalore
    Movers and Packers
    Packers and Movers Mumbai

    ReplyDelete
  29. Thanks for sharing these useful information! This is really interesting information for me.
    - www.hotmail.com
    - google mail

    ReplyDelete
  30. Acording to our reports C. Raveendranath Education Minister kerala announced that 82% of students have cleared the 2017 SSLC exams.
    kerala sslc results 2017
    kerala 10th class sslc results 2017

    ReplyDelete
  31. There's a lot of interesting info here! I'm very grateful for the post! movers and packers chennai is here to make your life simpler

    Packers And Movers Bangalore charges

    ReplyDelete
  32. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    animal jam | five nights at freddy's | hotmail login

    ReplyDelete
  33. I was working and suddenly I visits your site frequently and recommended it to me to read also. The writing style is superior and the content is relevant. Thanks for the insight you provide the readers!

    http://word-cookies-answers.com

    ReplyDelete
  34. I was more than happy to uncover this great site. I need to to thank you for your time due to this fantastic read!! I definitely enjoyed every bit of it and I have you bookmarked to see new information on your blog.
    for latest updates about sports . please visit
    Sportleadz
    Champions Trophy 2017
    Champions Trophy 2017 Hghlights
    Champions Trophy 2017 Fixtures
    Champions Trophy 2017 Live Scores

    ReplyDelete
  35. Thanks on your marvelous posting! I really enjoyed reading it, you’re a great author.Please visit here:
    Packers And Movers Jaipur

    ReplyDelete
  36. "Enjoyed every bit of your blog article.Really looking forward to read more. Really Cool."
    Packers And Movers raipur

    ReplyDelete
  37. Your article is very good and useful, thank you very much for this content.
    windows movie maker

    ReplyDelete
  38. Interesting article! Thank you for sharing them! I hope you will continue to have similar posts to share with everyone!
    html color

    ReplyDelete
  39. http://rrbresultsindia.com


    RRB is one of the top Job Site sRRB Recruitment 2017so

    RRB is one of the top Job Site sRRB Rcruitment Notifications so

    RRB is one of the top Job Site sRRB Previous Papersso

    RRB is one of the top Job Site sRRB Syllabusso

    RRB is one of the top Job Site sRRB Resultsso

    RRB is one of the top Job Site sRRB NTPC Resultsso

    RRB is one of the top Job Site sUpcoming Railway jobsso

    RRB is one of the top Job Site sRailway Recruitment Board 2017-2018so

    RRB is one of the top Job Site sRRB Jobs 2017-2018so













    ReplyDelete
  40. I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again
    bloxorz

    ReplyDelete
  41. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    animal jam | five nights at freddy's | hotmail login

    ReplyDelete
  42. We are expert in Handling,Packers And Movers Kolkata and Packing & Shifting of Household Goods, Office goods, Commercial Equipment and Car, Logistics and Transportation. Packers and Movers Kolkata

    ReplyDelete
  43. Packers And Movers Kolkata is recognized as a business manager providing wide-ranging and differentiate service appearance as well as Relocation Shifting, Logistics and Transportation, Facilities managing, strategy & Designing services.html: Packers And Movers Pune

    ReplyDelete
  44. I really enjoyed reading your blog, you have lots of great content.Please visit here: html:Packers And Movers Trichy

    ReplyDelete
  45. Great post. I was checking continuously this blog and I am impressed!
    Very useful info specifically the last part :) I care for such info much.
    I was looking for this certain information for a very long time.
    Thank you and best of luck gmail sign up | hotmail login | hotmail email login | hotmail account login | gmail sign in

    ReplyDelete

  46. What's Going down i am new to this, I stumbled upon this I have discovered It positively useful and it has aided me out loads. I am hoping to contribute & aid different users like its helped me. Great job.
    Watch Wimbledon live
    wimbledon stream

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger