响应式网站上的 IE 渲染问题答案

【问题标题】：IE rendering issue on responsive website响应式网站上的 IE 渲染问题
【发布时间】：2014-02-10 10:58:36
【问题描述】：

This responsive page（和类似的）在 Chrome 和 Firefox 中运行良好，但在 IE 浏览器窗口变小时时无法正常运行。

视口的大小似乎没有按预期调整，文本太宽，图像没有缩小。

这在桌面 IE 中问题不大，但确实意味着 Windows Phone 用户无法正常查看网页。

我认为现代版本的 IE 已经解决了这些问题？

有人知道是什么原因造成的吗？

【问题讨论】：

【解决方案1】：

在处理小宽度的媒体时，您需要禁用列的浮动。也就是说，如果我检查元素 <div clas="col-1 left">...</div>，转到 IE 中的检查器并禁用 .left {...} 的浮动规则，一切看起来都应该适用于移动设备。

我发现浮动对象处理跨浏览器可能有点棘手，所以我只在绝对需要时浮动项目。

编辑：删除错误代码。

奇怪的是，在@media screen and (max-width:799px) 的媒体规则中，您有规则

.col-4.left,.col-3.right {
    float: none;
    clear: both;
}

.col-2.right {
    float: none;
    clear: both;
}

我想知道为什么像

.col-1.left {
    float: none;
    clear: both;
}

不包括在内？

【讨论】：