HTML页面在不同的浏览器上显示不正确
HTML页面在不同的浏览器上显示不正确
提问于 2014-03-18 17:06:16
我有下面的html页面，它从一个文件的网址，并显示它们。调整图像大小以适合屏幕，以避免滚动的需要。我的问题是，它在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>回答 1
Stack Overflow用户
发布于 2014-03-18 17:32:37
为什么不使用一些css来调整图像的大小呢？你可以为图片使用css：..col md-3 img {显示:块；浮动:左；宽度: 33.3333%；最大宽度:33.3333%；高度:自动；}据我所知，调整大小的问题js代码是完全不必要的。
当浏览器没有完全下载图片时，这似乎是运行代码的问题。你应该在触发window load evenet之后执行你的代码。
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22474629
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号