How does Internet Explorer 8 support the CSS outline attribute?

Question

The website says it's supported however the following style does not render.


    <style type="text/css">
        a[href="#"]{outline:#f00 dotted 2px !important}
    </style>

however, the following will render


    <style type="text/css">
        a[href="#"]{border:#f00 dotted 2px !important}
    </style>

Here is my document


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>...</title>
   <link type="text/css" rel="stylesheet" href="../content/style.css" />

</head>
<body>...</body>
</html>

Are you sure that rule gets applied? I think IE8 does support attribute selectors (http://www.quirksmode.org/css/contents.html), but that'd be worth checking. — Dominic Rodger, Oct 08 '09 at 14:04
it is supported only in standards mode... what rendering mode is your page in? — Alex Gyoshev, Oct 08 '09 at 14:06

David Ma · Accepted Answer · 2009-10-08T14:21:53.460

8

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.

edited Oct 08 '09 at 14:21

answered Oct 08 '09 at 14:11

David Ma

1,342
9
6

I've add the head of my document to my original question. It is xhtml 1.0 strict and it validates – David Oct 08 '09 at 14:20
that was it, i had compatibility mode turned on – David Oct 08 '09 at 14:23

James Goodwin · Answer 2 · 2009-10-08T14:12:45.320

2

Maybe because the link does not appear in the browser as # but as yourpage.html#

Try using ends-with instead:

<style type="text/css">
    a[href$="#"]{outline:#f00 dotted 2px !important}
</style>

edited Oct 08 '09 at 14:12

answered Oct 08 '09 at 14:04

James Goodwin

7,360
5
29
41

Border is not the same as outline. He's just pointing out that the selector that he's using works for his purposes. – David Ma Oct 08 '09 at 14:20

How does Internet Explorer 8 support the CSS outline attribute?

2 Answers2

Linked