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

Question

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

视口似乎没有按预期调整大小，文本流动太宽，图像尺寸不合适。

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

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

有人知道造成这个问题的原因吗？

Answer 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;
}

不包括在内？