Jump to content
Stef's Coding Community
Sign in to follow this  
newseed

How To Apply Css Specifically For Ie9 And Ie10

Recommended Posts

I had an unusual situation today with a particular font type that required css adjustment for IE10 and IE9 because IE handles the font just a tad different. This font had to be perfectly placed and aligned. Fixing IE9 is not a problem because it still supports conditional comments but as you know IE10 no longer uses it and yet I have this font issue not displaying as it should just like Firefox or Chrome.

 

So off I go searching the net and I found a couple of solutions:

 

Solution 1: JavaScript (jquery)

 

This solution is fairly popular to those that likes to use javascript.

 

<script type="text/javascript">
if ($.browser.msie && $.browser.version == 10) {
 $("html").addClass("ie10");
}
</script>

 

What this does is sniffs out the browser version in which case IE10. Once it determines that IE10 is being using it will add a class to the html tag like this

 

<html class="ie10">

 

You can now override any css with ie10 class in front of the other elements. Example:

 

.myclass {padding: 10px;}

 

For IE10:

 

.ie10 .myclass (padding: 5px;}

 

 

You can also adjust the script to specify IE9 as well:

 

<script type="text/javascript">
if ($.browser.msie && $.browser.version == 9) {
 $("html").addClass("ie9");
}
</script>

 

 

Or both IE9 and 10:

 

<script type="text/javascript">
if ($.browser.msie && $.browser.version == 10) {
 $("html").addClass("ie10");
}
if ($.browser.msie && $.browser.version == 9) {
 $("html").addClass("ie9");
}
</script>

 

However, today I found what I think is even a better way by using css media query.

 

Solution 2:

@media screen and (min-width:0\0) { 
   .myclass {padding:5px;}
}

 

Notice min-width: 0\0 where it has a backward slant. I don't know how or why it works but it does. Just keep in mind that it effects both IE9 and 10 together meaning you won't be able to define them separately.

 

Nevertheless, I really like media query over jquery.

Edited by Eddie

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...