带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题
Posted
技术标签:
【中文标题】带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题【英文标题】：IE9 responsive image resize issue with pure CSS3 media query 【发布时间】：2014-02-13 23:06:46 【问题描述】：我尝试设置响应式布局设计。
我的问题是：在 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,videoborder:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;bodyline-height:1;article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summarydisplay:block;nav ullist-style:none;blockquote,qquotes:none;blockquote:before,blockquote:after,q:before,q:aftercontent:none;afont-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;insbackground-color:#ff9;color:#000;text-decoration:none;markbackground-color:#ff9;color:#000;font-style:italic;font-weight:700;deltext-decoration:line-through;abbr[title],dfn[title]border-bottom:1px dotted #000;cursor:help;tableborder-collapse:collapse;border-spacing:0;hrdisplay:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;input,selectvertical-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" /></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
铬
【问题讨论】：
【参考方案1】：阅读http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/ 后，我发现我的所有包装器都应该有一个主包装器。 （页眉包装，页脚包装等）
然后我纠正了自己。
问候
【讨论】：
以上是关于带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题的主要内容，如果未能解决你的问题，请参考以下文章