CSS 媒体查询和 IE8 兼容性
Internet Explorer 8 (IE8) 在某些 CSS 媒体查询方面存在限制,尤其是导入语句。
不支持查询:
@import url("desktop.css") screen and (min-width: 768px);
替代写法:
为了支持 IE8,需要将 import 语句分成两行:
@import url("desktop.css") screen; @media (min-width: 768px) { @import url("desktop.css"); }
代码关注点:
在提供的代码片段中:
@import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
第一个 import 语句将覆盖 IE8 中的第二个 import 语句。为了避免这种情况,应该重新组织导入:
@import url("ipad.css") only screen and (device-width:768px); @import url("desktop.css") screen;
解决方案:
为了获得更好的兼容性,请考虑使用 css3-mediaqueries-js 或 Respond 等填充工具。 Node.js,它为 IE8 等旧版浏览器中的媒体查询提供支持。
以上是如何使 CSS 媒体查询在 Internet Explorer 8 中工作?的详细内容。更多信息请关注PHP中文网其他相关文章!