IE9響應式圖像調整大小與純CSS3媒體查詢問題

我的問題是：當在1024 * 768屏幕分辨率，視檢查沒有滾動條的寬度是1007我設置CSS3我的媒體查詢1007px視口@media screen and (max-width: 1007px)

它工作正常，在Chrome中。

但它在IE9中不起作用。直到@media screen and (max-width: 1024px) IE9無法正常工作。

由於沒有滾動條的實際視口寬度是1007px，我必須使IE9（和IE7 & IE8，如果可能的話）以1007px的正確方式工作。

相關圖片低於Chrome和IE9。正如你在IE9中看到的，我的圖像右側被裁剪。在Chrome中，整個圖像按預期顯示。

我也使用modernizr-1.7.min.js它說，一個JavaScript庫，使MSIE的行爲像一個符合標準的瀏覽器。

我的CSS

/* html5doctor.com Reset Stylesheet v1.5 Last Updated: 2010-08-12 Author: Richard Clark - http://richclarkdesign.com */ 
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;} 

#page{ 
    max-width:1280px; 

    overflow-y:scroll; 


} 

#wrapper-header, #wrapper-content, #wrapper-footer, #wrapper-nav { 
    width: 100%; overflow: hidden;margin:0 auto; 
} 

@media screen and (max-width: 1007px) { 

    #logoimg { 
     width: inherit; /* This makes the next two lines work in IE8. */ 
     max-width: 100% /* Add !important if needed. */ 
     height: auto; /* Add !important if needed. */ 
     } 
    }

我的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Lorem Ipsum</title> 
    <meta name="viewport" content="initial-scale=1, width=device-width"> 
    <script src="js/modernizr-1.7.min.js"></script><!-- this is the javascript allowing html5 to run in older browsers --> 
    <script src="js/IE9.js"></script><!-- A JavaScript library to make MSIE behave like a standards-compliant browser. --> 
    <link rel="stylesheet" type="text/css" href="css/css.css" media="screen" /> 
</head> 
<body id="page"> 
    <div id="wrapper-nav"> 

    </div><!-- navigation wrapper--> 
    <div id="wrapper-header"><img id="logoimg" src="img/logo.jpg" alt="" /></div><!-- header wrapper--> 
    <div id="wrapper-content">b</div><!-- content wrapper --> 
    <div id="wrapper-footer"> 

     <script type="text/javascript">  
      var viewportHeight; 
      var viewportWidth; 
      if (document.compatMode === 'BackCompat') { 
       viewportHeight = document.body.clientHeight; 
       viewportWidth = document.body.clientWidth; 
      } else { 
       viewportHeight = document.documentElement.clientHeight; 
       viewportWidth = document.documentElement.clientWidth; 
      } 
      document.write('<p>Your viewport width without scrollbars is '+viewportWidth+'x'+viewportHeight+'</p>'); 
     </script> 
     <p>Lorem Ipsum</p> 


    </div><!-- footer wrapper --> 
</body> 
</html>

IE9

enter image description here