How to write a CSS hack for IE 11?
CssCss SelectorsInternet Explorer-11Css HackCss Problem Overview
How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet.
Is there any css selector?
Css Solutions
Solution 1 - Css
Use a combination of Microsoft specific CSS rules to filter IE11:
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Filters such as this work because of the following: >When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
References
Solution 2 - Css
In the light of the evolving thread, I have updated the below:
IE 11 (and above..)
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 and above
_:-ms-lang(x), .foo { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10 only
_:-ms-lang(x), .foo { property:value\9; }
IE 9 and above
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 and 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
IE 9 only
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 8,9 and 10
@media screen\0 {
.foo {property:value;}
}
IE 8 Standards Mode Only
.foo { property /*\**/: value\9 }
IE 8
html>/**/body .foo {property:value;}
or
@media \0screen {
.foo {property:value;}
}
IE 7
*+html .foo {property:value;}
or
*:first-child+html .foo {property:value;}
IE 6, 7 and 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6 and 7
@media screen\9 {
.foo {property:value;}
}
or
.foo { *property:value;}
or
.foo { #property:value;}
IE 6, 7 and 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6
* html .foo {property:value;}
or
.foo { _property:value;}
Javascript alternatives
###Modernizr
> Modernizr runs quickly on page load to detect features; it then > creates a JavaScript object with the results, and adds classes to the > html element
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to html element:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Footnote
If possible, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.
###Attribution / Essential Reading
Solution 3 - Css
Here is a two steps solution here is a hack to IE10 and 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers
and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
and this HTML tag
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
and now you can write your CSS code like this
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
for more information please refer to this websites,wil tutorail, Chris Tutorial
And if you want to target IE11 and later,here is what I've found:
_:-ms-fullscreen, :root .selector {}
Here is a great resource for getting more information: browserhacks.com
Solution 4 - Css
I have been writing these and contributing them to BrowserHacks.com since the fall of 2013 -- this one I wrote is very simple and only supported by IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
So the text shows up in blue with internet explorer 11. Have fun with it.
More IE and other browser CSS hacks on my live test site here:
UPDATED: http://browserstrangeness.bitbucket.io/css_hacks.html
MIRROR: http://browserstrangeness.github.io/css_hacks.html
(If you are also looking for MS Edge CSS Hacks, that is where to go.)
Solution 5 - Css
You can use the following code inside the style tag:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Below is an example that worked for me:
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
Please note that since (#nav li) and (#nav a) are outside of the @media screen ..., they are general styles.
Solution 6 - Css
So I found my own solution to this problem in the end.
After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal
In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.
Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
I will update the code example with more styles when I discover them.
NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.
I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.
Solution 7 - Css
You can use js and add a class in html to maintain the standard of conditional comments:
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Or use a lib like bowser:
Or modernizr for feature detection:
Solution 8 - Css
I found this helpful
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Add this under your <head> document