HTML页面无法在其他浏览器上正确显示

Question

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

所有图像的宽度均为400，高度为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>

Answer 1

为什么不使用CSS来调整图像大小？ 您可以将CSS用于图像：.col-md-3 img {display：block; 向左飘浮; 宽度：33.3333％; 最大宽度：100％； 高度：自动； 就我理解您的问题而言，完全不需要js代码来调整大小。

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

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

HTML页面无法在其他浏览器上正确显示

问题描述

1 个解决方案

解决方案1
0 2014-03-18 09:32:36

HTML页面无法在其他浏览器上正确显示

问题描述

1 个解决方案

解决方案1 0 2014-03-18 09:32:36

解决方案1
0 2014-03-18 09:32:36