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



我将导出的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中。

救命!表的宽度是1007px,我也制作了1007px的图像标题,但我无法同时使用它!我有一种感觉,这是由于表格边框数据中的额外像素,但我似乎无法解决这个问题。

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

谢谢!!

ps我有两张截图,我试图附加或链接,但我认为我还没有足够的代表,所以我甚至不能发布托管的。lol

firefox

我不太确定为什么PXpadding and margin等于0的情况下没有正确显示。但我有一些东西可以解决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图像现在与表齐平。

img标记在表外,但在容器内。很明显,Firefox有一些天生的边界或边距属性需要清除,所以我可以通过将img标记放入表中,然后添加内联样式的属性来跨越整个宽度。当它进入表格后,我将全宽(1007px)更改为100%,现在它的响应很合适。

当图像在表外时,它遵循PAGE和容器属性,因为现在它可以正常工作,因为它在实际单元格内使用table属性。

希望这能在其他人像我一样陷入困境之前帮助他们。欢呼

最新更新