IE8 中最小宽度的奇怪行为

发布于 2024-12-09 09:33:32 字数 922 浏览 0 评论 0原文

我有一个简单的要求; 应用desktop.css以获得更大的屏幕尺寸并且 将 iPad.css 应用到较小的屏幕尺寸

现在我想使用 CSS 媒体查询来实现这些。

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css\desktop.css">
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="css\ipad.css">

现在我了解到旧版 IE 不支持 min-width。但我在 IE8 中看到了一种奇怪的支持 即 IE8 将 min-width 识别为属性,但不识别为媒体查询。

所以

#example{*min-width:100px;}

在 IE8 中工作正常

但这不是

@media only screen and (min-width:100px) 

我已经尝试过以下 IE

<!--[if IE ]><link rel="stylesheet" media="screen" href="css\desktop.css"><![endif]-->

但我想仅在特定的最小宽度应用 IE 桌面 css并不总是..

是否有一个 JS 解决方法可以解决这个问题;

<!--[if IE AND min-width:100px]><link rel...

请告诉我如何在 IE 中应用 2 套 CSS。

I have a simple requirement ;
Apply desktop.css for larger screen sizes AND
Apply iPad.css for somewhat smaller screen sizes

Now I want to use CSS Media Queries for these.

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css\desktop.css">
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="css\ipad.css">

Now I have read that older IE does not have support for min-width. But there is a strange kind of support that I see in IE8
i.e IE8 recognizes min-width as a property, but not as a media query.

So

#example{*min-width:100px;}

works fine in IE8

But this does not

@media only screen and (min-width:100px) 

I have already tried the following for IE

<!--[if IE ]><link rel="stylesheet" media="screen" href="css\desktop.css"><![endif]-->

But I want to apply IE desktop css at a particular min-width only and NOT always..

Is there a JS workaround for this like;

<!--[if IE AND min-width:100px]><link rel...

Please let me know how I can apply 2 set of CSS in IE.

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

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

发布评论

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

评论(1

旧伤还要旧人安 2024-12-16 09:33:32

仅 IE9+ 支持媒体查询。< /a>
您可以使用
Respond.js 之类的 polyfill 来实现 IE6-8 兼容性。

Media queries are only supported by IE9+.
You can use a polyfill like Respond.js for IE6-8 compatibility.

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