If you’ve tried to use attribute selectors in IE 7 and found it to be quite spotty, you’re not alone. Here’s a brief illustration of just what I mean:
tr[height="50%"] { background: #fff; }
Though this bit of CSS will work in virtually any browser, it will not work in IE7. But these will:
div[height="50%"] { background: #fff; }
tr[height] { background: #fff; }
Aside: It’s important to note that a DOCTYPE has to be specified in order for attribute selectors to work at all in IE7.
So what’s the deal? Link to heading
I created a test page to reproduce these issues and verified them in IE 7. Then, I opened the page in IE 9, opened the DOM inspector (F12), and changed the Browser and Document modes to IE 7. Voila, the attribute selector issues are reproducible there as well. I found that unchecking the selector in the CSS pane and checking it again actually caused the selector to work.
This is pure speculation, but I believe the cause of these inconsistencies is that IE 7 will complete the loading of a webpage before certain attribute selectors have had enough time to resolve against the DOM.
In any case, the elements can be targeted through a number of other, more effective means, and luckily for us, the user base for IE 7 is currently at just 1.53% (Source: StatCounter).