IE8 中最小宽度的奇怪行为
我有一个简单的要求; 应用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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
仅 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.