HTML 页面无法在不同的浏览器上正确显示答案

【问题标题】：HTML page not displayed correctly on different browserHTML 页面无法在不同的浏览器上正确显示
【发布时间】：2014-03-18 09:06:15
【问题描述】：

我有以下 html 页面，它从文件中获取 url 并显示它们。调整图像大小以适应屏幕以避免滚动。我的问题是它在 Firefox 上正确显示，但 iceweasel 只显示一个空白页面。这让我很困惑，因为我没有在上面找到任何东西。感谢您的帮助。

图像的宽度和高度都为 400，但 iceweasal 指出第一张图像的宽度为 0，高度为 19。如果我加载页面并刷新几次，页面将正确显示。

html页面：

<!DOCTYPE HTML>
<html>
<head><style>
.col-md-3 img {
    float:left;
}
body {
    margin:0px;
}
</style>
<script>    
var inRowLimit = 3;

function resizeImgs() {
    var images = document.querySelectorAll("img");
    var count = images.length;
    var rows = 1;
    if (count > inRowLimit) {
        rows = Math.ceil(count/3);
        count = inRowLimit;
    }
    var maxWidth = Math.floor(window.innerWidth/count);
    var maxHeight = window.innerHeight/rows;
    for(var i=0; i<=images.length; i++) {
        var currW = document.getElementById('img'+i).offsetWidth;
        var stretchW = maxWidth/currW;
        var currH  = document.getElementById('img'+i).offsetHeight;
        var stretchH = maxHeight/currH;
        if (stretchW <= stretchH)     
            document.getElementById('img'+i).style.width=currW*stretchW+'px';
         } else {
            document.getElementById('img'+i).style.height=currH*stretchH+'px';
        }           
      }
   }

function go() {
    <!--abstracted-->
    loadImgs(file);
}

function loadImgs(infile) {
    <!--abstracted-->
    resizeImgs();
}
window.onload = go
</script>
</head>
<body>
<div id="images">
</div>
</body>
</html>

【问题讨论】：

你确定所有图片都已经完全加载了吗……？
我怎样才能确定它们是？

标签： jquery html css firefox iceweasel

【解决方案1】：

为什么不使用一些 css 来调整图像的大小？您可以将 css 用于图像： .col-md-3 img { 显示：块；向左飘浮; 宽度：33.3333%；最大宽度：100%；高度：自动； } 据我了解，您的问题 js 代码调整大小是完全没有必要的。

当浏览器没有完全下载图像时，运行代码似乎存在问题。您应该在触发窗口加载事件后执行您的代码。

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load

【讨论】：

为了建立这个答案，您 (@user2196234) 在几次尝试后获得了图像，因为浏览器已经缓存了它们，因此它们已及时加载以供脚本执行。
我已经更新了我的问题并添加了 window.onload 但它仍然不起作用
如果所有图片都是 400x400，我想你可以尝试为你的 img 标签添加宽度和高度属性。
当前的图片集都是 400x400 但以后可能不会这样了。
如果我使用你的 css sn-p 什么都不会发生。