IE 中的 CSS 图像大小问题...响应式设计答案

【问题标题】：CSS image sizing issue in IE...responsive designIE 中的 CSS 图像大小问题...响应式设计
【发布时间】：2012-09-12 04:01:28
【问题描述】：

我正在努力将网站转换为响应式网站，但在调整图像大小和某些 jquery 元素的位置时遇到问题。

请看this test site。减小浏览器宽度（我设置为 768），在 Firefox 中一切正常。

在 IE8 中，除了滑块中图像的大小和滑块标题的位置之外，一切正常。

图像尺寸不会缩小以适应较小的视口。至于幻灯片上元素的定位，我希望有一个解决方案，因为我想我不能在页面上使用 IE 特定样式，因为它不是响应代码的一部分......或者我可以吗？？

我很茫然！

【问题讨论】：

【解决方案1】：

我的猜测是媒体查询使用的 CSS 选择器

#slider > section > deiv > div img { 
    width: 768px;
    height: 251px;
}

尝试将部分标签更改为其他内容或直接在 CSS 选择器中选择图像。 IE8 不支持 section 标签，因为它是 HTML5 元素，因此媒体查询无法选择 section 标签。

您可以将 CSS 选择器更改为：

#slider * img {
    width: 768px;
    height: 251px;
}

#slider * img 选择器将获取 ID 为滑块的元素的任何子/孙子。

有关部分标签的更多信息和浏览器支持，请访问：http://www.w3schools.com/html5/tag_section.asp

编辑：经过进一步研究，看起来 IE8 不支持媒体查询。您可以使用其他替代方法来模拟带有 javascript 的媒体查询。看看这个先前的问题： IE8 support for CSS Media Query

它看起来相对容易实现，因为基本上你所做的只是在你的应用程序中包含这个 JS 文件并编写你的媒体查询，就像它们是为原生支持它的浏览器编写的一样。

【讨论】：

非常感谢...不幸的是，这并没有成功。实际上，这个更改也破坏了 Firefox :( 奇怪的是，我最终使用子选择器作为一个简单的类，img 不起作用。我恢复了代码，以便用户可以看到滑块在 Firefox 中的外观。
试试上面的编辑...我修复了 CSS 选择器，使它可以在 IE 和 Firefox 中工作。
这有效...图像已调整大小...谢谢！现在我还有其他 IE 问题。看起来我现在需要调整滑块的位置（它没有居中）和标题元素。我可以在条件 IE 标签内使用媒体查询吗？
回答了我自己的问题...我可以在条件语句中进行媒体查询。再次感谢您的帮助！
很高兴我能帮上忙。继续并将答案标记为正确以关闭问题。