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

Question

我正在努力将网站转换为响应式，并且我遇到了图片大小调整和一些jquery元素定位的问题。

请查看this test site。减少浏览器宽度（我已设置为768）并且在Firefox中看起来都很好。

在IE8中，一切都有效，除了滑块中的图像大小和滑块标题的位置。

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

我不知所措！

Answer 1

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

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

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

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

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

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

了解更多信息＆amp;部分标记上的浏览器支持访问：http://www.w3schools.com/html5/tag_section.asp

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

它建议使用http://code.google.com/p/css3-mediaqueries-js/在IE 8中实现此功能。

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