CSS 媒体查询在 IE 9 中不起作用

发布于 2024-11-28 02:08:30 字数 250 浏览 1 评论 0原文

我在设计中包含了一些媒体查询,以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示:

@media screen and (min-width:1024px)
@media screen and (max-width:1024px)

Chrome、Safari 和 Firefox 运行良好,只有 IE 是个问题。我知道 IE 9 之前的所有版本都不支持此功能,但它们在 IE 9 中根本不起作用。可能是什么问题?

I have included some media queries in my design to change the width of some elements of the page based on the browser's width. The queries look like this:

@media screen and (min-width:1024px)
@media screen and (max-width:1024px)

Chrome, Safari and Firefox work great, only IE is a problem. I know that all versions prior to IE 9 don't support this feature, but they don't work in IE 9 at all. What might be the problem?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

誰ツ都不明白 2024-12-05 02:08:30

你是否开启了兼容模式?

Do you have compatibility mode turned on?

十年不长 2024-12-05 02:08:30

确保您有正确的 DOCTYPE 声明。
强烈建议网站使用 HTML5 文档类型,以便支持最广泛的已建立和新兴标准(在本例中为 CSS3),以及最广泛的 Web 浏览器:< /代码>

Make sure you have right DOCTYPE declaration.
It's strongly recommended that websites use the HTML5 document type in order to support the widest variety of established and emerging standards (in this case: CSS3), as well as the broadest range of web browsers: <!DOCTYPE html>

内心激荡 2024-12-05 02:08:30

使用以下条件

@media only screen (min-width: 1px) and (max-width:599px)

代替

@media only screen (max-width:599px) 

并确保 min-width1px,因为 IE9 不会拾取 0px

use the following conditions

@media only screen (min-width: 1px) and (max-width:599px)

instead of

@media only screen (max-width:599px) 

and make sure min-width is 1px as IE9 doesn't pickup 0px

想你只要分分秒秒 2024-12-05 02:08:30

不幸的是,任何版本的 IE 都不支持 min-width。因此,如果您使用此约定:

<!---  CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">

<!---  CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">

<!---  CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">

它将全部忽略。

参考

Unfortunately min-width is simply not supported in any version of IE. So if you use this convention:

<!---  CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">

<!---  CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">

<!---  CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">

It will ignore it all.

Reference.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文