javascript - 使用ajax加载时具有相同颜色代码的文本是不同的

Question

我正在开发一家以绿色为主色的网上商店。一切都很好，但我注意到加载 ajax 的 div 中的文本比它应该的更亮。常规加载的文本明显不太亮，但两个文本具有完全相同的颜色代码。

如果不发布整个 CSS 和 HTML 文件，我认为我无法在此处复制它，但这是正常页面加载时的 HTML 文本片段:

<div class="primary-product-text vis-product-name">Knie-insteekkoppeling, kunststof zwart, M6</div>

以及来自动态加载内容的片段:

<span class="primary-product-text">Knie insteekkoppeling, kunststof zwart, M6</span>

CSS:

.primary-product-text {
    color: #01a85e;
}

.vis-product-name {
    display: block;
    height: 38px;
}

链接:https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/所示产品为绿色。如果您单击产品旁边的购物车图标或搜索“knie”，您会看到相同的颜色代码会产生更亮的绿色。

Answer 1

可能是浏览器渲染。我注意到即使 CSS 看起来相同，但生成的像素并不相同。这可能与字体相对较细和 -webkit-font-smoothing: antialiased; 被打开有关。

在查看时，我还意识到弹出窗口中的文本不同，我最好的猜测是使用完全相同的文本。 (Knie 和 insteekkoppeling 之间的减号)

(第一个是网页，第二个来自弹出窗口)