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>
IE Hack how to make IE to skip/avoid from reading a line in the style sheet
To prevent IE8 (and older) from reading the styles, simply use something in your selector that it doesn’t support and that all other browsers support.
For example, add :root
to your selector. Here’s an example: http://jsfiddle.net/mathias/kX6tR/
.foo { background: red; }
:root .foo { background: lime; }
:root
is supported in IE9 and all other browsers, therefore this is a safe CSS hack.
IE7 does not understand display: inline-block
The IE7 display: inline-block;
hack is as follows:
display: inline-block;
*display: inline;
zoom: 1;
By default, IE7 only supports inline-block
on naturally inline
elements (Quirksmode Compatibility Table), so you only need this hack for other elements.
zoom: 1
is there to trigger hasLayout
behaviour, and we use the star property hack for setting the display
to inline
only in IE7 and lower (newer browsers won't apply that). hasLayout
and inline
together will basically trigger inline-block
behaviour in IE7, so we are happy.
This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
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.
IE CSS display: inline-block Rendering issue
Add DOCTYPE to your html,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It works for me after I added this.
Note: in jsFiddle, DOCTYPE was automatically generated so it will work there.
Edit 1:
Check this for more information,
Edit 2:
You can read more about inline-block styling here
Related Topics
Using Ie Conditional Comments Inside a Stylesheet
Changing Spacing Between Paragraphs and Inside of Paragraphs
:Empty Selector Not Working in CSS
How to Prevent the Floating Layout Wrapping When Firefox Zoom Is Reduced
CSS Hide Element, After 5 Seconds Show It
How to Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar
Hide Jquery Accordion While Loading
How to Use Calc() in Tailwind CSS
Including Margin for Width and Height
What Is the Purpose of Using Font: Inherit
Position:Sticky Is Not Working
How to Align Input Field and Submit Button (Also Differences Between: Ie, Ffox, Chrome)
How to Get a Three Column Layout with Twitter Bootstrap
How to Use a Stylus Variable in Calc
Google Chrome "Failed Parsing Sourcemap":Css.Map (Web Essential)