Home >Web Front-end >CSS Tutorial >How Can I Make My CSS Media Queries Work in Internet Explorer 8?
CSS Media Queries and IE8 Compatibility
Internet Explorer 8 (IE8) poses a limitation when it comes to certain CSS media queries, particularly the import statement.
Unsupported Query:
@import url("desktop.css") screen and (min-width: 768px);
Alternate Writing Method:
To support IE8, it's necessary to separate the import statement into two lines:
@import url("desktop.css") screen; @media (min-width: 768px) { @import url("desktop.css"); }
Code Concerns:
In the provided code snippet:
@import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
The first import statement will overwrite the second import statement in IE8. To avoid this, the imports should be reorganized:
@import url("ipad.css") only screen and (device-width:768px); @import url("desktop.css") screen;
Solution:
For greater compatibility, consider using polyfills such as css3-mediaqueries-js or Respond.js, which provide support for media queries in older browsers like IE8.
The above is the detailed content of How Can I Make My CSS Media Queries Work in Internet Explorer 8?. For more information, please follow other related articles on the PHP Chinese website!