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

Question

这个响应式页面（和类似页面）在 Chrome 和 Firefox 中运行良好，但是当浏览器窗口变小时在 IE 中查看时它无法正常运行。

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

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

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

有谁知道是什么导致了这个问题？

score 1 · Accepted Answer

当您处理小宽度的媒体时，您需要禁用列的浮动。也就是说，如果我检查元素<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;
}

不包括在内？

1 回答 1