正文 

当前位置： 首页 > 知识 >

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

     2023-03-06     296

关键词：

【中文标题】CSS 媒体查询在 IE 9 中不起作用【英文标题】：CSS media query not working in IE 9 【发布时间】：2011-10-18 13:26:07 【问题描述】：

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

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

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

【问题讨论】：

【参考方案1】：

您是否打开了兼容模式？

【讨论】：

兼容模式已开启。关闭它解决了这个问题。非常感谢。 谢谢，这也解决了我的问题......我想我会提一下，以防它帮助其他人，在我的 IE9 上的“兼容性视图设置”下，它有“在兼容性视图中显示 Intranet 站点”选项打勾，这似乎是默认的？？？这影响了从我的 WAMP 服务器提供的网站 兼容模式是 IE9 的默认模式吗？【参考方案2】：

不幸的是，任何版本的 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">

它会全部忽略。

Reference.

【讨论】：

如果您提供解决方法会很有帮助。根据您的“参考”链接，IE 7-9 都支持min-width。【参考方案3】：

确保您有正确的 DOCTYPE 声明。 强烈建议网站使用 HTML5 文档类型，以支持最广泛的既定标准和新兴标准（在本例中：CSS3）以及最广泛的网络浏览器：&lt;!DOCTYPE html&gt;

【讨论】：

【参考方案4】：

使用以下条件

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

而不是

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

并确保 min-width 是 1px，因为 IE9 不会拾取 0px

【讨论】：

为啥媒体查询在 Angular8 中不起作用

】为啥媒体查询在Angular8中不起作用【英文标题】：WhyMediaQueriesnotworkinginAngular8为什么媒体查询在Angular8中不起作用【发布时间】：2020-07-0723:46:16【问题描述】：我在CLI版本8上运行Angular应用程序。上次我将代码检查到github并构建... 查看详情

calc() 在媒体查询中不起作用

】calc()在媒体查询中不起作用【英文标题】：calc()notworkingwithinmediaqueries【发布时间】：2014-07-0305:59:29【问题描述】：@mediascreenand(max-width:calc(2000px-1px)).colwidth:200px;减法后的值应该是1999px，但它似乎不起作用。如果我手动将其更改... 查看详情

媒体查询在样式化组件中不起作用

】媒体查询在样式化组件中不起作用【英文标题】：MediaQuerynotworkinginstyledcomponents【发布时间】：2022-01-0408:40:49【问题描述】：我一直在尝试应用媒体查询，但无论我在做什么都没有响应，即使在chrome上检查它，我也看不到那里... 查看详情

CSS：图像最大宽度在 Firefox 和 IE 中不起作用

】CSS：图像最大宽度在Firefox和IE中不起作用【英文标题】：CSS:Imagemax-widthnotworkinginFirefoxandIE【发布时间】：2013-06-0113:10:36【问题描述】：imgmax-width:100%!important;/*Setamaxiumrelativetotheparent*/width:auto\\9!important;/*IE7-8needhelpadjustingres 查看详情

输入占位符css在IE9中不起作用[重复]

】输入占位符css在IE9中不起作用[重复]【英文标题】：InputPlaceholdercssnotworkinginIE9[duplicate]【发布时间】：2016-04-2422:09:27【问题描述】：占位符颜色仅在IE9中不起作用。其他浏览器工作正常。谁能告诉我IE9需要哪些CSS？我使用了一... 查看详情

响应式媒体查询在 Google Chrome 中不起作用

】响应式媒体查询在GoogleChrome中不起作用【英文标题】：ResponsivemediaquerynotworkinginGoogleChrome【发布时间】：2014-08-1206:15:42【问题描述】：我编写了一段CSS代码来根据用户的屏幕宽度流畅地切换我的网站布局的宽度。如果用户可用... 查看详情

媒体查询在 iframe 中不起作用

】媒体查询在iframe中不起作用【英文标题】：Mediaqueriesnotworkinginsideaniframe【发布时间】：2015-01-2909:19:59【问题描述】：我有一个响应式网页。它利用媒体查询。但在iframe中加载的同一页面无法正常工作。例如，考虑到我的网页，... 查看详情

媒体查询在 React 中不起作用

】媒体查询在React中不起作用【英文标题】：MediaquerynotworkinginReact【发布时间】：2017-12-1423:25:33【问题描述】：当屏幕/视口的宽度超过900像素时，我试图隐藏图像。出于某种原因，这在一个非常基本的示例中不起作用。我的页脚... 查看详情

媒体查询在 Firefox v10 中不起作用

】媒体查询在Firefoxv10中不起作用【英文标题】：MediaqueriesnotworkinginFirefoxv10【发布时间】：2012-03-1503:50:54【问题描述】：我一直在我的主样式表中使用媒体查询来根据屏幕大小加载不同的样式。在我升级到Firefoxv10.0之前一切正常... 查看详情

媒体查询在 chrome 中不起作用，但在 iphone 上起作用

】媒体查询在chrome中不起作用，但在iphone上起作用【英文标题】：mediaqueriesnotworkinginchromebutworksoniphone【发布时间】：2013-04-1112:41:22【问题描述】：我在样式表的底部添加了这个@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480p... 查看详情

CSS 过渡在 IE 中不起作用

】CSS过渡在IE中不起作用【英文标题】：CSStransitionnotworkinginIE【发布时间】：2013-11-1901:44:08【问题描述】：我无法在IE或Firefox中进行此转换，但在Safari和Chrome中看起来不错。不透明度显示但即时。对我来说，下面的CSS看起来不错... 查看详情

CSS背景大小在IE7 / 8中不起作用[重复]

】CSS背景大小在IE7/8中不起作用[重复]【英文标题】：CSSbackground-sizenotworkinginIE7/8[duplicate]【发布时间】：2013-03-2321:42:25【问题描述】：由于某种原因，我的背景大小在IE7&8中不起作用。谁能告诉我为什么。同样在IE检查器中，ba... 查看详情

.eot 在 IE 中不起作用

】.eot在IE中不起作用【英文标题】：.eotnotworkinginIE【发布时间】：2012-10-3016:13:15【问题描述】：我正在使用CSS导入字体。但是，它似乎在IE中不起作用。我不知道为什么。这是我的CSS代码：@font-facefont-family:\'bello\';src:url(\'../fonts/b... 查看详情

CSS flexbox 在 IE10 中不起作用

】CSSflexbox在IE10中不起作用【英文标题】：CSSflexboxnotworkinginIE10【发布时间】：2013-08-0321:00:03【问题描述】：在IE10中，此代码无法正常工作：.flexboxformdisplay:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-flex-direc... 查看详情

CSS 菜单下拉菜单在 IE8 中不起作用

】CSS菜单下拉菜单在IE8中不起作用【英文标题】：CSSmenudropdownisnotworkinginIE8【发布时间】：2013-09-0509:08:06【问题描述】：我知道对此有很多疑问，但我仍然不明白如何制作一个在IE8中也可以使用的CSS菜单下拉菜单。我做了thissample... 查看详情

使用 CSS 的文本居中在 IE 中不起作用

】使用CSS的文本居中在IE中不起作用【英文标题】：TextCenteringUsingCSSnotworkinginIE【发布时间】：2010-09-0906:38:39【问题描述】：我无法让表格中的文本在IE中居中显示。在Firefox2、3和Safari中一切正常，但由于某种原因，文本在IE6或7... 查看详情

表单 CSS 输入：悬停和输入：焦点在 IE 中不起作用

】表单CSS输入：悬停和输入：焦点在IE中不起作用【英文标题】：FormCSSinput:hoverandinput:focusnotworkinginIE【发布时间】：2011-11-1711:05:50【问题描述】：我在这个页面上使用了input:hover和input:focus的CSS样式：LenticularPrintingand3DPromotionalProd... 查看详情

CSS 翻译在 SVG g 上的 IE11 中不起作用

】CSS翻译在SVGg上的IE11中不起作用【英文标题】：CSStranslatenotworkinginIE11onSVGg【发布时间】：2014-05-2715:30:08【问题描述】：我想使用&lt;g&gt;标签移动一组svg元素，但它在IE中不起作用，即使是最新版本，虽然它适用于所有其... 查看详情