图像在 chrome 中正确显示，但在 Firefox 或 IE 中不正确答案

【问题标题】：Image displays properly in chrome but not in firefox or IE图像在 chrome 中正确显示，但在 Firefox 或 IE 中不正确
【发布时间】：2012-01-31 01:11:07
【问题描述】：

因此，在 html.erb 文档中，我有一个表格，其中包含一个缩放到列大小的图像，如下所示：

   <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 中加载页面时，它会以原始大小显示图像，而不是像应有的那样缩放到列的大小。我尝试删除 height 和 weight 属性，而不是用一些像这样的内联 CSS 替换它们：

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

但我又遇到了同样的问题。在 Chrome 中运行良好，但在其他两个中运行良好。有谁知道可能导致兼容性问题的原因以及我可以做些什么来修复或解决它？

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

【问题讨论】：

您在heigh="95%" 中缺少t；你确定这不是问题的原因吗？
这是这篇文章的错字。它不是实际代码中的问题。不过感谢您指出这一点，我需要在发帖前学习校对。

标签： ruby-on-rails css internet-explorer html firefox

【解决方案1】：

在确定其内容的（宽度）之前，浏览器无法确定列的宽度。在您的情况下，内容的宽度取决于列的宽度。根据浏览器和图片是否存在于缓存中，您会得到意想不到的结果。

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

【讨论】：

【解决方案2】：

对于 firefox，您可以尝试 css 背景大小，例如

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

或者您可以尝试使用 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)
});

【讨论】：

<style type="text/css"> .imagestyle { width:35%; height:95%; padding-left:1px; } </style> . . . <img src="someimage.gif" class="imagestyle"/> . . . 与以前相同的问题。在 Chrome 中工作，而不是在 FireFox 或 Internet Explorer 中。我确实有一个外部 CSS 文件。我会尝试通过它来操作图像。
您也可以替换 img 标签并将其替换为一个 div 的宽度。现在看看我的帖子。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：