Apply style ONLY on IE
Update 2017
Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.
Original
The simplest way is probably to use an Internet Explorer conditional comment in your HTML:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.
How can I set CSS only for specific IE browsers?
How about that?
http://www.quirksmode.org/css/condcom.html
Or that if you don't like those statements
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
How do I specify IE 11 specific css file?
Use the below hack and followed by your css style:
*::-ms-backdrop,
Example:
*::-ms-backdrop,/*Your element*/ {
/*Your styles*/
}
Note:It will only affects in IE browsers.So You need to apply your normal style before this.
Is there a way to set any style for a specific browser in CSS?
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a *
character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link>
or <style>
elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body
element) using JavaScript after doing browser detection in JS.
How to write a CSS hack for IE 11?
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>
How to apply class only for IE?
For IE10+ you can do the following:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-wrapp{padding-bottom:0;}
}
Demo Fiddle (Note that the text is red only in IE 10+)
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.red {
color: red
}
}
<div class="red">text</div>
Related Topics
Lessc Binary Not Available After Installing Less via Npm
What Is the Default Style of the Blue Focus Outline in Chrome
Offset Scroll Anchor in HTML with Bootstrap 4 Fixed Navbar
Add Prefixes to CSS Class Names Using Less or SASS
How to Vertically Center Align a Position:Relative Element
How to Make Text Take Full Width of It's Container
How to Make IE8 Honour Opacity on an ':Before' Pseudo Element
Responsive Images Positioned Over Image
How to Disable Automatic Links Coloring Without Selecting a Color
How to Set CSS Width Equal to Length of Longest Text
Firefox Line-Height Issue with Input Fields
Disable the Ctrl/Wheel Zoom Effect at Runtime
Which Browsers Support Page Break Manipulation Using CSS and the Page-Break-Inside Element