如何解决第三方cookie限制问题？

Question

我最近注意到我的个人项目网站中的新闻链接已损坏，并且有一些我以前没有注意到的第 3 方 cookie 限制/警告（显示在开发人员控制台中）。

基本上，React

<Card.Link>

href 不再打开所需的链接。这发生在没有对代码进行任何更改的情况下。前几天链接还好好的，突然就失效了。当光标悬停在每个新闻标题上时，每个链接甚至看起来都不是链接（如屏幕截图所示）。

我已经查看了 Google 更新的第 3 方 cookie 限制，但我实际上无法判断这是否是破坏我链接的原因。链接可以在这里查看：https://ok.surf/#feed

手动复制/粘贴到浏览器的 URL 栏中时，呈现页面中的每个 href URL 仍然有效。 React 代码似乎也是有效的。

用常规锚标记替换 React

Card.Link

标记并不能解决问题。

我想知道是否是第 3 方 cookie 政策破坏了该网站？我也尝试过很多浏览器和不同的设备。链接完全失效了。

我的网站中确实有一个 Iframe，但删除它并不能解决问题。我可以看到 Google Analytics 在开发者控制台的第三方 cookie 问题部分中也突出显示。删除 Iframe 和 Google Analytics 链接并不能解决损坏的链接。

在隐私/安全设置中启用第 3 方 cookie 也没有效果。如果损坏的新闻链接与第 3 方 cookie 相关，我该如何排查问题？或者谷歌可能以某种方式阻止我使用他们的新闻链接？

感谢您抽出时间来查看。

Answer 1

如果将以下内容添加到

.card-body

，则问题得以解决：

position: relative;
z-index: 2;

链接不可点击的原因是因为

.card-img-overlay

是绝对定位的并且与链接重叠，从而阻止了它。

几乎可以肯定这并不突然。如果它之前可以工作，则代码已更改，或者您正在查看不同的环境而没有意识到。