CSS media query not working in IE 9

后端 未结 4 1737
一个人的身影
一个人的身影 2020-12-20 17:25

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:

@         


        
相关标签:
4条回答
  • 2020-12-20 17:34

    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)
  • 2020-12-20 17:41

    Do you have compatibility mode turned on?

    0 讨论(0)
  • 2020-12-20 17:44

    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)
  • 2020-12-20 17:53

    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)
提交回复
热议问题