How Does Internet Explorer 8 Support the CSS Outline Attribute

How does Internet Explorer 8 support the CSS outline attribute?

Check whether IE8 is rendering in a compliant mode. If you have something like the following in the your header, then outline will not work:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

IE8 will also default to quirks mode if your doctype tag is incorrect, so verify this as well. Also, if you're using IIS, it's possible that the server is forcing IE7 compatibility mode.

Infamous outline: none; issue within IE(8)

The following line in your <head> element is biting you:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

As mentioned in this answer, you need to remove that line to disable IE7 emulation mode. Note also that if you're running on IIS, the server itself can force this emulation mode (so check that also, if removing this doesn't solve the problem). Also, make sure your doctype is set appropriately.

What CSS3 features does Internet Explorer 8 support?

css3.info provides an authoratative overview of the implementation statuses of various modules in different browsers. Most modules are in fact not implemented by any mainstream module, but you can view the compatibility tables for certain modules, which provide detailed information.

CSS property for IE8

Option 1

http://jquery.malsup.com/corner/

Option 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Option 3

http://css3pie.com/

Option 4

http://www.netzgesta.de/corner/

Option 5

See this question

EDIT: Option 6

https://code.google.com/p/jquerycurvycorners/ - border-radius.
For rgba you can try create .png image with opacity and sat him as background

or try

.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

outline attribute conflict for IE and chrome

CSS:

  input:focus,
a:focus {
outline: 1px dotted;
outline: auto -webkit-focus-ring-color;
outline-color: green;
}

press tab and:
ie, ff, opera: show dotted border

chrome, safari ring border

http://jsfiddle.net/84bFN/3/

CSS works in IE11 but not in IE8

there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8).
1) you can use hacks for ie8 :
To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. e.g.

div {
border: 2px solid #aaa; /* for all browsers */
border: 2px solid #f009; /* IE8 and below - red border */
}

.element {
margin-bottom: 20px;
margin-bottom: 10px\9; /* IE8 */
}

2) using conditional statements from within your HTML :

 <!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->

e.g :

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

styles :

.element {
margin-bottom: 20px;
}

.ie7 .element {
margin-bottom: 10px;
}

.ie8 .element {
margin-bottom: 15px;
}

How to apply border radius in IE8 and below IE8 browsers?

Option 1

http://jquery.malsup.com/corner/

Option 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Option 3

http://css3pie.com/

Option 4

http://www.netzgesta.de/corner/

Option 5

See this question

EDIT:
Option 6

https://code.google.com/p/jquerycurvycorners/

CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

You can't cover IE8 in pure CSS, because it does not support neither final nor vendor-prefixed implementation. IE9 will support it just fine.

You can see full support table here:

http://caniuse.com/#search=border-radius

So based on this table, to answer your question, you won't need -ms-... for IE10 and -o-.. for Opera.



Related Topics



Leave a reply



Submit