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
How to Set the Transform Origin to a Specific Point on the Element
Want to Make the Whole Page in Grayscale Except Specified Div
How Element Selector Is More Specific Than Id Selector
Bootstrap V4 Grid Sizes/Sass List
Missing Font-Awesome.Less Variables in My .Less File After Importing
Keyframe Animation Does Not Work on Safari for iOS
CSS Parallax Working Beautifully in Chrome But Not Firefox
Margin:Auto Not Working Vertically
Set CSS3 Box-Shadow Not to Be on Top of Div
How to Route to CSS/Js Files in MVC.Net
How to Target CSS Class Names That Start with Digit
How to Repeat a CSS Grid Layout Pattern
Can You Float a Div in the Lower Right of Its Parent Div and Have Text Wrap Around It