CSS media query not working in IE 9

2020-02-13 20:55发布

站内问答 / HTML/CSS
2015 4 4

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?

4条回答
别忘想泡老子
2楼-- · 2020-02-13 21:22

Do you have compatibility mode turned on?

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
3楼-- · 2020-02-13 21:25

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.

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
4楼-- · 2020-02-13 21:34

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

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
5楼-- · 2020-02-13 21:38

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)