Internet Explorer 11 Rgba Refuses to Work

internet explorer 11 rgba refuses to work

apparently IE11 was using IE7 mode as default rendering

using

<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />

fixes it :)

Color: rgba() workaround for Internet Explorer?

Internet Explorer only accepts percentages as RGB values. This will work

color: rgb(16%,16%,16%);
color: rgba(42,42,42,0.7);

Microsoft Spec: http://msdn.microsoft.com/library/ms530749.aspx

DEMO: http://wecodesign.com/demos/stackoverflow-7082955.htm

UPDATE because of a bug in IE compatibility mode, if you declare two of the same thing, it ignores them both, the following will work in both compatibility mode and standards mode

h1 {
    color: rgb(16%,16%,16%);
}
h1 {
    color: rgba(42,42,42,0.7);
}

CSS background opacity with rgba not working in IE 8

Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.

EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.

CSS Opacity not working in IE11

That appears to be yet another IE bug.. As a work-around, you could instead add the opacity via the background property with a rgba() color. Then simply add the opacity to the td element.

Updated Example - results seem consistent across browsers.

.faded {
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;
}
td {
    opacity:0.4
}

rgba() not working in IE8

Simple answer: IE8 does not support RGBA properties. It only knows about RGB.

RGBA support was only added in IE9.

Other very old browsers may also not have support for RGBA. However, there aren't many browsers that old that are still in use other than IE8.

There are some ways you could work around this:

Use a polyfill such as CSS3Pie. This will allow you to specify RGBA background colours in your CSS. You still won't be able to use it directly in JS code as you have it, but you could change the class to deal with it.
Use a tool like Modernizr to detect whether the browser supports this feature, and provide different functionality if it doesn't.
Use IE8's -ms-filter style to achieve the transparency effect. This allows you to set a range of special effects, including opacity. This is a non-standard IE feature, and is replaced by standard CSS in IE9/10, but is still useful for in certain cases for old IE versions.
Use a small PNG image with an alpha channel as your background instead. Bit of a shame to be using a background image for a plain colour background these days, but it will achieve the result you're looking for in all browsers.

rgba not working in IE8 how to solve this

You can either use a .png as a background image, or just set a solid color fallback for IE8. The fallback would work like:

.navitem:hover {
    /* solid color fallback */
    background: rgb(100,100,100);
     /* modern browsers */
    background: rgba(255, 255, 255, 0.3);
}

css opacity not working in IE

opacity does not work on pseudo objects in IE 10,9,8

Try this code:

HTML:

<div></div>

CSS:

div{
  width:100px;
  height: 100px;
  background: blue;

  filter:alpha(opacity=30);
  -moz-opacity:0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

div:after{
    content: ' ';
    position: absolute;
    width:100px;
    height: 100px;
    left: 200px;
    background: blue;

    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

Click to see it in action

What you're supposed to see is two squares both semi transparant. However IE disregards the opacity properties for the pseudo item, and it renders it completely opaqe.

Absolute positioning error in Internet Explorer 11

try adding position:relative to the containing elements of div#corner, .container and/or .page-content

position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.

so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.

It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.

Angular 4.x - CSS Background color not changing IE11

<div (click)="selectColor('rgba(59, 88, 151, 0.6)')" class="select opt --blue">b</div>    <div (click)="selectColor('rgba(191, 58, 43, 0.6)')" class="select opt --red">r</div>    <div (click)="selectColor('rgba(76, 174, 79, 0.6)')" class="select opt --green">g</div>

Internet Explorer 11 Rgba Refuses to Work