0

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

请看这个测试站点。减小浏览器宽度（我设置为 768），在 Firefox 中看起来一切正常。

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

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

我不知所措！

4

1 回答 1

0

我的猜测是媒体查询使用的 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

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

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

于 2012-09-11T16:44:40.537 回答