Internet explorer & Edge Browser CSS Hacks
Here are the most common CSS hack for Internet explorer & Edge Browser and different version.
You can also check hack for Firefox and Chrome.
Internet explorer & edge
|
1 |
@supports (-webkit-appearance:none) {} |
|
1 |
@media screen\9 {} |
|
1 |
@media \0screen\,screen\9 {} |
|
1 |
@media \0screen {} |
|
1 |
@media screen and (min-width:0\0) {} |
|
1 |
_:-ms-input-placeholder, :root .selector {} |
|
1 |
@media screen { @media (min-width: 0px) {} } |
|
1 2 3 4 |
<!--[if IE 6]> Internet Explorer 6 <![endif]--> <!--[if IE 7]> Internet Explorer 7 <![endif]--> <!--[if IE 8]> Internet Explorer 8 <![endif]--> <!--[if IE 9]> Internet Explorer 9 <![endif]--> |
|
1 2 3 4 |
<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]--> <!--[if lte IE 7]> Internet Explorer 7 or less <![endif]--> <!--[if lte IE 8]> Internet Explorer 8 or less <![endif]--> <!--[if lte IE 9]> Internet Explorer 9 or less <![endif]--> |
|
1 2 3 4 |
<!--[if gte IE 6]> Internet Explorer 6 or greater <![endif]--> <!--[if gte IE 7]> Internet Explorer 7 or greater <![endif]--> <!--[if gte IE 8]> Internet Explorer 8 or greater <![endif]--> <!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]--> |
|
1 |
<!--[if IE]> Internet Explorer 9- <![endif]--> |
|
1 |
*:first-child+html #dos { color: red } |
|
1 |
html>body #tres { color: red } |
|
1 |
html>/**/body #cuatro { color: red } |
[paypal-donation]
Hello Vijay,
Thank you for sharing the hacks for microsoft edge and IE. I request to you provide one example how to write the code in media query for particular resolution for example, Is this we need to write like following example,
@media screen { @media (min-width: 1024px) {
_:-ms-lang(x), .gallery-tab ul.gall-menu li a {padding: 10px .5em !important;}
} }
Or else is there is another way. Kindly provide the example of right method to write .
With regards,
amit yerunkar
Hi Amit,
Glad to see you here.
Below is the solution for writing IE Browser CSS hack with media query for a specific width. Hope this will work for you. 🙂
@media screen and (min-width: 1280px) { (min-width: 0px) {}
_:-ms-input-placeholder, :root .gallery-tab ul.gall-menu li a {padding: 10px .5em !important;}
}