较小<img>适用于Firefox v22.0,但不适用于IE v10.0.9
smaller <img> works in Firefox v22.0, but not in IE v10.0.9
我在Firefox版本22中成功地显示了一张照片——在两个不同的img标签中——其中一个img标签没有设置CSS宽度或高度,因此图像显示为原始大小。
第二个img标记由CSS样式设置为60px乘60px。
当我设置这两个img标记的"innerHTML"时,在Firefox中,我看到原始大小的图像和相同的图像缩小到60px乘60px的img标记中。
在IE 10.0.9版本中,我在第二个img税中没有看到任何通过CSS设置为60px乘60px的内容。
它与正在执行的代码完全相同。我需要为IE做些什么来显示我代码中没有的60px乘60px img标记中的图像吗?
顺便说一句,下面的代码是在一个PHP文件中生成的——我使用"隐藏Iframe"方法加载,然后在网页上显示图像——下面的代码在一个PHP文件中生成,然后将您看到的内容输出到我的html页面上的隐藏Iframe,这就是为什么您看到这里的代码获得Iframe的父文档:
<script language="JavaScript" type="text/javascript">
var parDoc = parent.document;
parDoc.getElementById('justOpenedImage').innerHTML =
'<div><img src=''http://localhost/thesite/aPhoto.jpg'' /></div>';
parDoc.getElementById('60by60').innerHTML =
'<div><img class="60by60Image" src=''http://localhost/thesite/aPhoto.jpg'' /></div>';
</script>
这是CSS类60by60Image:
.60by60Image
{
border: 2px solid green;
width: 60px;
height: 60px;
display: inline-block;
}
这是页面上的html:
<!-- THE ORIGINAL-SIZED IMAGE APPEARS FINE HERE IN BOTH IE AND FF -->
<div id="justOpenedImage"></div>
<!-- THE SMALLER IMAGE APPEARS HERE IN FIREFOX BUT NOT IN IE -->
<div>
<img class="60by60Image" id="60by60" src="" />
</div>
这在Firefox中运行得很好,但在IE中,它无法显示较小的60乘60版本的图像——不知道为什么。
您设置了图像的innerHTML
。执行完脚本后,文档树看起来像这样:
<div>
<img class="60by60Image" id="60by60" src="">
<div><img class="60by60Image" src='http://localhost/thesite/aPhoto.jpg' /></div>
</img>
</div>
我认为IE就是不能"处理"这个问题。至少,它不是有效的HTML。
可以通过将id="60by60"
属性添加到父div并将其从img中删除来修复此问题。让javascript更改div的innerHTML
,而不是图像。
<div id="60by60">
<img class="60by60Image" src="">
</div>
或者更改图像的src
属性。
parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';
相关文章:
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- JavaScript不显示剩余字符,但适用于其他页面
- 我如何完善这个Javascript代码,使其只适用于来自图像的链接(而不是来自文本的链接)
- 为什么这只适用于身体部分而不是头部
- 为什么不't此正则表达式适用于重复出现的对
- document.getElementById 对内部 html 的调用适用于 $_POST 和 $_GET 变量,但不
- JavaScript 位置适用于本地主机而不是服务器
- Rally App SDK 2.0:Rallymultiobjectpicker,适用于不显示displayField的
- jQuery事件在Mozilla上不起作用,并且适用于其他浏览器
- Angular.js - 控制器不为索引执行,适用于其余模板
- D3 .on 更改适用于文本而不是图表
- Zillow 数据 - json_encode不起作用 - 适用于常规变量
- 弹出模式仅适用于表格中的第一个元素,第二次单击后不会再次打开
- Phonegap Android项目适用于模拟器,而不是实际的手机
- ajax jonp 不应该适用于 请求的上不存在“访问控制-允许源”标头
- AngularJS:ng-单击不起作用,适用于<按钮>
- Javascript不会在移动设备上加载.适用于桌面
- 为什么我的代码适用于高度:100px,而不是高度:100%
- 拖放区.js + Laravel-多文件上传不起作用(仅适用于一个文件)
- 哪些限制适用于不透明响应