标题图像在 Firefox 和 chrome 中显示的大小不同

Question

我将导出的 excel 文档中的实时文本作为 html 放入旧的 pdf 位置以用于 seo 目的。我相信该页面最初是作为 wordpress 模板创建的，并且是一个令人讨厌的 aspx 文件，因为它有很多堆叠的 div。

起初，我尝试将 html 文档作为参考文件嵌入到 pdf 位置，但它显示的响应很糟糕，所以我粘贴了内联表格数据，现在它的显示和功能基本正常。由于内联粘贴它，我丢失了一些格式化 css，很可能这就是原因。

但是我现在遇到的问题是标题图像在 Firefox 和 chrome 中的显示方式不同。

这是图片的代码片段：
<img src="/imgs/dev/LILACheader.jpg" alt=“Lilac” class="img" style="margin-top:25px; width::100%; max-width: 100%; border: none;>

当我使用上述内容时，它在 Chrome 而不是 Firefox 中正确呈现，但是当我将其添加到内联样式时：
height:auto; and/or vertical-align:middle;

那么它在 FF 中是正确的，而不是在 Chrome 中。

帮助！表格宽度为 1007 像素，我也将图像标题设为 1007 像素，但我无法让它同时适用于两者！我感觉它来自表格边框数据中的额外像素，但我似乎无法解决这个问题。

有问题的页面：http://www.michells.com/perennials

谢谢！！

ps 我有 2 个屏幕截图我试图附加或链接，但我认为我还没有足够的代表，所以我什至不能发布托管的。哈哈

firefox

Answer 1

img 标签在表格之外，但在容器内。显然 Firefox 有一些固有的边框或边距属性需要清除，所以我可以通过将 img 标签放入表格然后添加内联样式属性来跨越整个宽度。一旦它在表格内，我将全宽 (1007px) 更改为 100%，它现在可以适当地响应。

当图像在表格之外时，它遵循 PAGE 和容器属性，现在由于使用实际单元格内的 TABLE 属性，它可以正常工作。

希望这可以在其他人像我一样陷入困境之前对其有所帮助。 干杯

Answer 2

我不确定为什么即使padding and margin 等于 0，PX 也无法正确显示。但我有一些东西可以解决 FF 无法正确处理尺寸的问题。 下面的代码将向您展示如何设置：

<center> !--You put inside your exciting center tag-->
<div id="table-stylesheet">
!--This is where your table and Table header Image is going to be-->
</div>
</center>

然后在你的 CSS 中简单地添加这个：

#table-stylesheet{
width: 1007px;
}

完成刷新 FireFox 后，确保 StyleSheet 已更新，您应该会看到 Header 图像现在与表格齐平。