Firefox 和 Chrome 中的图像差异答案

【问题标题】：Image difference in Firefox and ChromeFirefox 和 Chrome 中的图像差异
【发布时间】：2020-06-16 00:44:39
【问题描述】：

与 Firefox 相比，我在 Chrome 中显示的徽标图像有显着差异（我在 Firefox 上做了我的测试服务器，然后在 Chrome 中运行）

这里有两个区别：火狐

铬

它应该像在 Firefox 中一样出现。我切换了徽标并添加了图像特征以使其适合而不是编辑 CSS 文件。

代码如下：

<a class="navbar-brand" href="index.html"><img src="img/logo09.png" width="250%" height="250%" alt="logo"></a>

是否有快速解决此问题的方法？在此先感谢您的帮助:)

【问题讨论】：

尝试在徽标尺寸上使用固定的px 值？看起来 FF 和 Chrome 通过不同的元素计算 % 值（img 上的 FF，父级上的 Chrome）。
我试图让网站尽可能兼容不同的分辨率，这就是为什么我尝试使用维度作为 % 来代替，难道不能这样做吗？
我认为您应该使用原始尺寸的图像（最好的解决方案是为高密度屏幕使用 2 倍大的图像，但仍然是标称的（在这种情况下是一半 img 尺寸）-所以看起来不错在不同的屏幕上）。
我刚刚将它降低到合适的 px 大小，但它的显示仍然很奇怪，我可能需要为 Chrome 使用不同的 CSS 吗？铬：gyazo.com/b8d6f31d431592c49ccb780304dff5a5 火狐：gyazo.com/44b7da7f20a2e844149bc634d1a2fcf6
你应该把 JSFiddle 放在这里，你的问题中没有代码（如果你修改了那些内联 % 值）来显示那里发生了什么。

【解决方案1】：

使用样式表、内联样式或Dimension attributes是维护的噩梦...

height: 123px; /*or any other fixed/dynamic value, unit*/
width: auto;   /*let the browser do the scaling */

会有所帮助（除非您遇到特异性问题）

另外，很高兴知道在 HTML5 中 % 不允许在属性 width="" 和 height=""

上使用

<img> 属性

宽度
图片的固有宽度，以 HTML5 CSS 像素 或 HTML 4 像素或百分比表示。

身高
图片的固有高度，以 HTML5 CSS 像素 或 HTML 4 像素或百分比表示。

【讨论】：

【解决方案2】：

您可能遇到的问题可能与您对百分比的使用有关。您将它们设置为 250%，但百分比是多少？它应该是父元素，但父元素设置为什么？图片的父节点是没有设置宽度的锚元素，也不是块级元素。

尝试将父元素设置为某个固定宽度，看看问题是否消失或两个浏览器显示相同。

例如，我将封闭的锚元素设置为display:block;，并将其宽度设置为500px。

【讨论】：

【解决方案3】：

用固定的像素宽度替换百分比宽度。由于容器的布局略有不同，Firefox 和 Chrome 记录的百分比测量值不同。另外，将测量值添加到一个类中，然后给出一个!Important 属性。我相信 Chrome 有一个 css 文件，它在其中访问的所有网站上都使用它，它提供了一些设计布局等。

更新：在您发表评论后，尝试在该元素的开发人员工具中查看是否有东西覆盖它。如果没有，那么我不确定该建议什么。可能会采用不同的设计，例如带有元素的居中 div，或者使用带有此徽标的导航栏，或者使用不带栏的中心徽标。有很多选择。抱歉，我无法提供更多帮助

【讨论】：

我刚刚将它降低到合适的 px 大小，但它的显示仍然很奇怪，我可能需要为 Chrome 使用不同的 CSS 吗？铬：gyazo.com/b8d6f31d431592c49ccb780304dff5a5 火狐：gyazo.com/44b7da7f20a2e844149bc634d1a2fcf6

&lt;img&gt; 属性