Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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 <a href="http://msdn.microsoft.com/en-us/library/ms532853%28v=vs.85%29.aspx">this page</a>. </p> <p>The <code>gradient</code> filter is a "procedural surface" (along with <code>alphaimageloader</code>). A procedural surface is defined so:</p> <blockquote> <p>Procedural surfaces are colored surfaces that display between the content of an object and the object's background.</p> </blockquote> <p>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 <code>:before</code> and <code>:after</code>... Yes! <em>Content</em>. Specifically as <a href="http://msdn.microsoft.com/en-us/library/cc304078%28v=vs.85%29.aspx">MSDN notes</a>:</p> <blockquote> <p>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.</p> <p>The generated content interacts with other boxes as if they were real elements inserted just inside their associated element.</p> </blockquote> <p>Now, if it is <em>content</em> that is generated, then it is <em>not</em> an "object" containing content, but the <em>content itself</em> (which happens to have some behavior similar to an element object that might contain content).</p> <p>Thus, there is no "object" <em>containing</em> "content" (since it <em>is</em> content) between which the <code>filter</code> can place a procedural surface for content generated by a pseudo-element (i.e. "false element"). A <code>gradient</code> must be applied to the <em>object</em>, and then the procedural surface is placed between it and the content.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload