Why does a filter gradient on a pseudo element not work in IE8?
The question is "Why don't filters work on pseudo elements in IE8?" The following is as close to a definitive answer as I can muster. It comes from the information on this page.
The gradient
filter is a "procedural surface" (along with alphaimageloader
). A procedural surface is defined so:
Procedural surfaces are colored surfaces that display between the
content of an object and the object's background.
Read that carefully. It is essentially another "layer" you might say between the content of an object and that object's background. Do you see the answer to the question? What is created by :before
and :after
... Yes! Content. Specifically as MSDN notes:
The ::before and ::after pseudo-elements specify the location of
content before and after an element in the document tree. The content
attribute, in conjunction with these pseudo-elements, specifies what
is inserted.The generated content interacts with other boxes as if they were real
elements inserted just inside their associated element.
Now, if it is content that is generated, then it is not an "object" containing content, but the content itself (which happens to have some behavior similar to an element object that might contain content).
Thus, there is no "object" containing "content" (since it is content) between which the filter
can place a procedural surface for content generated by a pseudo-element (i.e. "false element"). A gradient
must be applied to the object, and then the procedural surface is placed between it and the content.
CSS gradient on a pseudo element in IE9
The almost same effect is possible with a simple box-shadow by setting a negative spread-radius.
inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]
Example: ( http://jsbin.com/ekehoz/edit#html,live )
box-shadow: 0px -15px 30px -10px #888;
Cannot rotate :after pseudo-element using CSS in IE8
Filters do not work on Pseudo elements in IE8. No-can-do.
IF IE8 support is a must, your best bet is to make #box:after it's own div. Not the cleanest solution, but is any hack for IE8?
after pseudo element does not work correctly in hr tag on Internet Explorer
This is happening because the default setting for overflow
on hr
tags is visible
in Chrome and Firefox but hidden
in IE. This causes any content outside the height
of the hr
to be cut off in IE.
To make this work in IE add overflow: visible;
to .hr-how
so the text can extend outside the boundaries of the hr
.
.hr-how { background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); border: 0; height: 1px; margin-bottom: 40px; margin-top: 40px; overflow: visible; text-align: center;}.hr-how:after { background: white; content: "HOW TO USE IT"; display: inline-block; font: "BodoniXT" !important; font-size: 0.9em; padding: 0 0.6em; position: relative; top: -0.7em;}
<hr class="hr-how" id="hr-how" />
css :before Pseudo-element not displaying background-image with IE8
IE8 has multiple issues with float and specific width/height values on tags. Try adding a "zoom:1" to trigger haslayout and see if that helps.
Table cell loses border when css gradient filter is applied in IE8
I've found a fix but you may not like it...
If you render in IE in quirks mode the border renders fine, it is only obscured if you're using compatibility mode. Compare these two pages in IE8:
With a
DOCTYPE
declaration
(source: boogdesign.com)
Without a
DOCTYPE
declaration
(source: boogdesign.com)
What also works is clicking the compatibility view button, but my attempts to get the same results with the compatibility mode meta tags were unsuccessful. I tried using box-sizing
, but also with no success. I conclude the only way to get it to work as you want is to force IE into quirks mode, but that may create so many other issues for layout that you may be better off just adding a wrapper element to attach your gradient background to.
Related Topics
Conditional HTML Attributes Using Razor MVC3
How to Stretch Flex Child to Fill Height of the Container
Make Columns of Equal Width in <Table>
How to Make the HTML5 Number Field Display Trailing Zeroes
Exclude Menu Item from the Collapse of Bootstrap 3 Navbar
CSS - Relative Positioned Parent Div Not Stretching to Absolute Child Div Height
Why My Inline-Block Divs Are Not Aligned When Only One of Them Has Text
Should the HTML Anchor Tag Honor the Disabled Attribute
Html5Shiv VS Dean Edwards IE7-Js VS Modernizr - Which to Choose
Bootstrap: Add Margin/Padding Space Between Columns
Image Width/Height as an Attribute or in CSS
With a Browser, How to Know Which Decimal Separator Does the Operating System Use
Right Align an Image Using CSS HTML
I Can't Get My Font-Awesome Icons to Show Up. Tried Importing CSS with Multiple Methods
How to Disable Form Fields Using CSS
Margin:Auto;' Doesn't Work on Inline-Block Elements
Auto Height on Parent Container with Absolute/Fixed Children