图片正常显示在铬但不是在Firefox或IE

因此，一个html.erb文档中我有一个表，在它和在该表是缩放到所述柱的尺寸，像这样的图像：图片正常显示在铬但不是在Firefox或IE

<table width="900" border="0" align="center" valign="top"> 
     <tr> 
     <td><img src="someimage.gif" width="35%" height="95%" /></td> 
     <td>a whole bunch more html content here</td> 
     </tr> 
    </table>

它可以在Chrome中正常工作，但由于某些原因，当我在IE或Fire Fox中加载页面时，它会以原始大小显示图像，而不是缩放到应该显示的列大小。我试图消除身高和体重的属性，而不是一些代替它们符合CSS是这样的：

<img src="someimage.gif" style="height:95%;width:35%"/>

，但我又遇到了同样的问题。在Chrome中运行良好，但在其他两个中运行得不错。是否有人知道可能会导致兼容性问题的原因以及我可以如何解决或解决该问题？

编辑：我可能应该提到我试图在外部CSS文件中使用绝对和相对作为参数定义图像的大小，然后是大小的像素值，然后在删除CSS代码，在HTML5 img标签的高度和宽度部分。在这两种情况下，放大任何浏览器都会使网站的整体外观变得糟糕，这就是为什么我改用百分比值。

来源

2012-01-27 Lee Abraham

你在'heigh =“95％”'中缺少't';你确定这不是问题的原因吗？ – 2012-01-30 10:02:06

这是这篇文章中的一个错字。它不是实际代码中的问题。感谢您指出这一点，但我需要在发布前学会阅读。 – 2012-01-30 14:12:08

浏览器无法确定列的宽度，直到它确定其内容的宽度。在你的情况下，内容的宽度取决于列的宽度。取决于浏览器并取决于图像是否存在于缓存中，您会得到意想不到的结果。

指定列的宽度和高度，您将得到预期的一致结果。 See demo here。

来源

2012-01-30 09:18:06

为Firefox，你可以尝试例如

<td> 
    <div style="background: url(someimage.gif); background-size: 100% 100%; width: 35%; height: 95%;"> 
    </div> 
</td>

CSS背景大小或者你可以尝试jQuery的，但你的HTML必须看起来像这样

<table width="900" border="0" align="center" valign="top"> 
    <tr class="image_tr"> 
    <td class="image_td"><img class="image" src="someimage.gif"/></td> 
    <td>a whole bunch more html content here</td> 
    </tr> 
</table>

现在这里是jQuery的

$(document).ready(function(){ 
    var height_percent = $("table .image_tr").height()/100; 
    var width_percent = $("table .image_td").width()/100; 

    $(".image").height(height_percent * 95); 
    $(".image").width(width_percent * 35) 
});

来源

2012-01-27 23:10:09 theliberalsurfer

' 。。。。。 .' 与之前相同的问题。适用于Chrome，不适用于FireFox或Internet Explorer。我确实有一个外部CSS文件。我会尝试通过它来操纵图像。 – 2012-01-27 23:22:51

您也可以替换img标签并将其替换为div的宽度。现在看看我的帖子。 – theliberalsurfer 2012-01-27 23:41:26

你应该尝试定义表格中td的宽度，我发现它们经常在Internet Explorer中搞乱:)

来源

2012-01-28 00:39:10

所有浏览器都会缩放图像，但结果不同，因为单元格大小不同。如果将border="0"更改为border="1"，则可以看到此内容。不同的浏览器将不同的列宽分配算法应用于表格，特别是在这种棘手的情况下。您要求将图像缩放到可用宽度的35％，基本上是单元格宽度，而单元格宽度又取决于单元格的内容等等。类似的考虑适用于身高。

要解决此问题，您需要指定所需的外观，而不依赖于特定浏览器的特定表格格式化算法。

来源

2012-01-28 06:20:38

图片正常显示在铬但不是在Firefox或IE

回答

相关问题