Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write a CSS hack for IE 11? [duplicate]

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?

like image 533
user2135651 Avatar asked Oct 16 '22 11:10

user2135651


People also ask

How do I write specific CSS for IE?

IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.

Can CSS be hacked?

CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

Is not working in IE11?

If you can't open Internet Explorer, if it freezes, or if it opens briefly and then closes, the problem might be caused by low memory or damaged system files. Try this: Open Internet Explorer and select Tools > Internet options. Select the Advanced tab, and then select Reset.


1 Answers

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

  • How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
  • Microsoft Extensions to CSS
  • CSS 2.1:Rule sets, declaration blocks, and selectors
like image 321
Paul Sweatte Avatar answered Oct 18 '22 00:10

Paul Sweatte