Question

我尝试设置自适应布局设计。

我的问题是：在1024 * 768屏幕分辨率下，没有滚动条宽度的选中视口是1007.我将CSS3中的媒体查询设置为1007px视口为@media screen and (max-width: 1007px)

它在Chrome中运行良好。

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

由于没有滚动条的实际视口宽度是1007px，我必须使用1007px以适当的方式使IE9（以及IE7和IE8，如果可能）。

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

反转片

enter image description here

Answer 1

在阅读http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/之后，我发现我的所有包装器都应该有一个主包装器。（标题包装，页脚包装等）

然后我纠正了自己。

问候

使用纯CSS3媒体查询的IE9响应式图像调整大小问题

1 个答案: