IE8 support for CSS Media Query

html css responsive-design internet-explorer-8 media-queries
testndtv picture testndtv · Apr 24, 2011 · Viewed 246k times · Source

Does IE8 not support the following CSS media query:

@import url("desktop.css") screen and (min-width: 768px);

If not, what is the alternate way of writing? The same works fine in Firefox.

Any issues with the code below?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Answer

Knu picture Knu · Apr 24, 2011

css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script's site) it "doesn't work on @imported stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements".

In the same vein you have the simpler Respond.js, which enables only min-width and max-width media queries.

Related questions

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know …

Read More
Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More