How to apply different css style for IE 10 and 11 only?

Question

For now, I tested my web application style on Chrome, FF, IE9, IE10, IE11, and Edge.

It all works as I expected except on IE10 and IE11.

I have common.css file that works for Chrome, FF, Edge.

Then I made copy of it and renamed it commonIE9.css.

Then in my layout.jspx, I applied it like following:

<spring:url var="css_common" value="/resources/css/common.css"></spring:url>
<spring:url var="css_common_ie9" value="/resources/css/commonIE9.css"></spring:url>

(SKIP)

<link rel="stylesheet" href="${css_common}"/>
&lt;&#33;&#45;&#45;[if IE 9]>
    <link rel="stylesheet" href="${css_common_ie9}"/>
&lt;&#33;[endif]-->

I used those ASCII codes as comment symbol. Credit to Mr. Colt from this post

So, I succeed to make it looks same in IE9 by changing value of width of couple items.

However, IE 10 and 11 does not support conditional comment.

I tried some hacks like

(-ms-high-contrast: active), (-ms-high-contrast: none)

but I have to apply different value per screen resolution like following:

@media only screen and (min-width: 1600px) {
    .header {overflow:hidden;width:100%;margin:0 auto;}
    .header .accTitle , .header .menu , .header .menuBtn {float: left;}
    .header .accTitle {width:270px;padding:10px;}  .header .menu  {width:1200px;} .header .menuBtn {width:10%;padding:5px 0;}
    .header .accTitle h2 {color:#2E75B6; font-size: 1.3em}
    .header .accTitle strong {font-size: 1.1em}

(SKIP)

So I am not sure I can use the hack above because it looks like I cannot differ its width condition.

I saw reset.css and tried it. It made IE10/11 and last of them look same by reset all styles that I set, so I do not want to use it, or at least to figure out how to keep my css.

My screens look like these

Chrome:

FF:

IE9:

IE10:

EDIT

I did change like following:

layout.jspx

<spring:url var="js_test" value="/resources/js/test.js"></spring:url>
<script type="text/javascript" src="${js_test}"><jsp:text /></script>

test.js

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);

common.css

.noticeSearchButton { width: 100px; padding: 6px 0 0 100px; }
html[data-useragent*='MSIE 10.0'] .noticeSearchButton { width: 100px; padding: 6px 0 0 80px; }

I created new js file then added user agent like Arsen Babajanyan said.

Then in css, copy the element I have to differ depends on browser, and added html[data-useragent*='MSIE 10.0'] in front of it.

FYI, for IE 11, you should use html[data-useragent*='rv:11.0'].

Thank you for helping today guys.

Do check answers provided at http://stackoverflow.com/questions/1373029/how-to-get-browser-information-in-jsp might be it will help you. — Gokul Shinde, Feb 04 '16 at 06:32
So what you are suggesting is using script to get information about user's browser and then call css file depends on the browser, right? — boomboomboom, Feb 04 '16 at 06:37
Yes, you need to add two different files of css like IE10.css and IE11.css on the base of browser details return by script and then do add css properties to override it to your main css file property. — Gokul Shinde, Feb 04 '16 at 06:41

score 2 · Accepted Answer · edited Feb 13 '16 at 07:07

2

Add the User Agent to the <html> element with a tiny bit of JavaScript:

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

IE 10's User Agent string is:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

Which will result in:

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

And you can then style like:

html[data-useragent*='MSIE 10.0'] h1 {
    color: blue;
}

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );

// IE 10 == Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

h1 {
  text-align: center;
  padding: 20px;
}

<h1>I'll be blue in IE 10 and black in everything else.</h1>

edited Feb 13 '16 at 07:07

Mr Lister

45,515
15
108
150

answered Feb 04 '16 at 07:01

Arsen Babajanyan

127
1
7

May I ask you how I should start this with? I am not sure I do understand how to implement JavaScript in my jspx file. Should I do something like the first guy did in following? http://stackoverflow.com/questions/968800/how-do-you-check-the-browsers-user-agent-in-a-jsp-page-using-jstl-el – boomboomboom Feb 04 '16 at 07:13
I just add temporary file called test.js and added , in my jspx file. Now I am going to try javascript codes you guys provided. – boomboomboom Feb 04 '16 at 07:23

How to apply different css style for IE 10 and 11 only?

1 Answers1