I can't get IE8 to support :before

Question

No idea why :before won't work. My IE8 browser will display it correctly on this page:

http://quirksmode.org/css/selectors/beforeafter.html

but not when I do it on this page:

http://africa.ie

Take a look at this: http://stackoverflow.com/questions/2546251/how-can-i-get-ie8-to-accept-a-css-before-tag — andi, Nov 20 '13 at 17:35
I think might be root of problem: http://stackoverflow.com/questions/1867383/css-renders-differently-on-web-server-than-on-development-environment — Juan Cullen, Nov 20 '13 at 18:36
A question should include code needed to reproduce the problem. A link to a live page is *not* enough. — Jukka K. Korpela, Nov 20 '13 at 19:10

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

IE8 does support :before.

Two possibilities:

IE is rendering the page in compatibility mode or quirks mode.

Either of these modes will disable this functionality. Add a valid doctype and set X-UA-Compatible to IE=edge to deal with this.
You're using ::before rather than :before.

This is quite a subtle one. The correct syntax is with a double-colon, but at the time IE8 was released, it was a single colon; the official syntax has been changed subsequently. All modern browsers will accept either single or double colon for ::before and ::after to accommodate this historical change, but IE8 is stuck only supporting the single colon.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 20 '13 at 17:31

Spudley

166,037
39
233
307

1. Done. See http://africa.ie 2. Done. I'm using single colon :before. See http://africa.ie – Juan Cullen Nov 20 '13 at 17:33
@JuanCullen not sure if this'll help, but could try removing ::before all together? I see you are now declaring both :before and ::before. – andi Nov 20 '13 at 17:39

score 0 · Answer 2 · answered Nov 20 '13 at 17:24

0

it works as long as you aren't in compatability mode. If you want it to support more I might recommend the following:

<!--[if lt IE 9]>
   <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

answered Nov 20 '13 at 17:24

Chris Pierce

706
5
9

The problem isn't compatibility mode, I can confirm that it's running in IE8 standards. – nullability Nov 20 '13 at 17:28
I tried this and I get popup warning 'This page is accessing information that is not under its control. This poses a security risk. Do you want to continue?' – Juan Cullen Nov 20 '13 at 17:32
then download the file and don't host it off of google's cdn. – Chris Pierce Nov 20 '13 at 18:35

score 0 · Answer 3 · answered Nov 20 '13 at 17:38

0

Removing the ::before and ::after selectors seems to get it work in IE8:

p.test:before {
    padding-right: 5px;
    content: url(http://quirksmode.org/pix/logo_ppk.gif);
}
p.test:after {
    font-style: italic;
    content: " and some text after.";
}

answered Nov 20 '13 at 17:38

nullability

10,545
3
45
63

cool - I suspected this but didn't have IE8 to test on. Maybe it would also work to do `p.test::before, p.test:before {}` instead of the reverse order. – andi Nov 20 '13 at 17:41
Yes but since they are equivalent (`::before` is CSS3, `:before` is CSS2) it doesn't really matter. IE8 only supports `:before` but modern browsers support both. – nullability Nov 20 '13 at 17:43
in theory it _shouldn't_ matter, but `p.test:before, p.test::before {}` was causing problems in IE8. I was just suggesting to try the reverse and see if it helps, if OP wants to include both. – andi Nov 20 '13 at 17:53
Yes, I'm saying there's no reason to use `::before` at all. "The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2." https://developer.mozilla.org/en-US/docs/Web/CSS/::before – nullability Nov 20 '13 at 17:59
agreed. But maybe someday a browser won't accept :before? Or maybe OP just wants it in there for the heck of it. who knows. – andi Nov 20 '13 at 18:21

I can't get IE8 to support :before

3 Answers3