带有Ajax的相同颜色代码的文本不同

我正在一家以绿色为主要颜色的网上商店中工作。 一切正常,但我注意到加载了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,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”,您会看到相同的颜色代码会产生较亮的绿色。

cuijuncyanway 回答:带有Ajax的相同颜色代码的文本不同

可能是浏览器渲染。 我注意到,即使CSS看起来一样,像素生成的也不一样。这可能与字体相对较细并且-webkit-font-smoothing: antialiased;处于打开状态有关。

在查看时,我还意识到弹出窗口中的文本是不同的,请我最好的猜测是使用完全相同的文本。 (Knieinsteekkoppeling之间的负号)

enter image description here (第一个是网页,第二个是弹出窗口)

,

找到了答案,这是因为CSS动画导致了一些文本呈现问题。我有几个CSS动画,例如在容器和各个div上进行转换和缩放。

解决方案是将以下CSS代码添加到主容器类:

-webkit-backface-visibility:隐藏;

本文链接:https://www.f2er.com/3159144.html

大家都在问