Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

[role=""] items not being styled for desktop... #69

glencampbell opened this Issue Oct 19, 2011 · 5 comments


None yet
5 participants

Things that are targeted using roles (e.g. [role="banner"]) are not being rendered in IE. My issue started here keithclark/selectivizr#23

[link removed]

The above page is only loading roles for the mobile first (style.css) stylesheet. Anything that starts with header[role="banner"], for example, is keeping it's basic style, e.g. it is not rendering role based styles from 768.css and upward on a desktop with IE

Many thanks,


mathiasbynens commented Oct 19, 2011

Could you please provide a minimal test case using http://jsfiddle.net/ or similar? Thank you!

I have never used JSFiddle, so hope I have done things correctly here: http://jsfiddle.net/GgrnB/ or full result here http://jsfiddle.net/GgrnB/embedded/result/

This will, hopefully, show what I mean.

I do use selectivizr also, for css selectors in IE. But my basic problem is anything defined in css as a [role=""] is not being rendered in ie7.

I ran into the same issue over the weekend and commented on it with selectivizr. Here's the gist of that:

Check out this demo on IE7: http://alexlande.com/respond-test/.

The first div, styled by [role="main"] doesn't change colors. It works fine on IE8 and even IE6, strangely enough.

Working on my personal site over the weekend, I ended up dropping respond.js for the time being and directing the large screen styles to IE the way that Andy Clarke is doing on his redesign. I imagine that if he had kept using respond he would have run into the same problem.


keithclark commented Dec 4, 2011

I've investigated this. The problem is IE7 is not honouring new style rules if they contain attribute selectors and it's not limited to [role].

More info: keithclark/selectivizr#23 (comment)


scottjehl commented Jan 16, 2012

Okay, in testing this just now, it appears that a fix I'm about to apply for another issue (issue #83) fixes this one too! The trick to preserving selectors in IE after injecting them into the DOM appears to be that the styles need to be inserted into the style element after it's appended to the DOM.
@keithclark - do you find similar?

keithclark/selectivizr#23 (comment)

@scottjehl scottjehl closed this in 8016973 Jan 16, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment