【油猴脚本】头像名片穿透修复、原生的图片切换（上一张、下一张）按钮找回
本帖最后由 哈哈哈哈_ 于 2026-7-20 02:01 编辑一、头像名片的覆盖穿透
逛论坛的时候，发现了一个奇怪的小问题：
论坛左侧用户头像，鼠标悬浮后会出现用户详细名片。但是有时候，帖子右侧的图片会直接覆盖到了悬浮名片上。
最开始想的是元素的z-index没设置好（z-index数值大的会显示在数值小的上面）
这类问题很好解决，z-index值调大些就行
调出浏览器的控制台，意外发现，名片div有z-index: 301; ，图片img没有z-index。
不管怎么调z-index，帖子中图片总是覆盖在名片上。
这就很奇怪了。
二、一个冷门属性
既然不是 z-index，那就只能继续找原因。
检查图片的样式时，发现图片img上有个 isolation: isolate; 属性
这个属性很冷门，平时没有见过，抱着试一试的心态，直接取消勾选这行
结果，头像名片悬浮时候，正常显示在图片上方
毕竟只是个外观问题，不影响正常的功能，就不想发帖
写了个油猴脚本强制覆盖原本的属性 isolation: auto !important;
三、疑惑
论坛启用原本的图片预览后，看到一篇帖子，快捷切换图片
点开图片时，按ad或者←→快捷切换图片
当时觉得奇怪，论坛图片上有上一张、下一张切换按钮，本来就很方便，不过这个快捷键脚本也算补充方法，放着没有深究
四、谜团
写论坛的其他脚本，经常会开启、关闭油猴
某天，在浏览论坛帖子时候，发现原生的上一张、下一张切换按钮竟然消失了
论坛这个老古董，平时偶尔会出现Bug刷新页面又正常：
[*]图片加载不出来
[*]图片上的黄色提示块无法消失
怀疑是论坛的原因
五、真相
发现了一个细节：关闭油猴 按钮消失，开启油猴 按钮出现。
在反复开关脚本，终于确认，是自己的脚本让这个按钮显示，把自己的脚本排查了一遍，找到了真相：
[*]有了 isolation: auto !important; 切换按钮就能显示
[*]没有 isolation: auto !important; 切换按钮不能显示
六、为什么一个 isolation 会产生这种效果？
这是个冷门、小众的属性，平时几乎不会用到这个属性
1. 隔离层叠上下文，避免 z-index 相互污染
在一个庞大的项目里，可能会有成百上千个组件，每个组件都是不同的人写的。如果有人在某个组件里写了 z-index: 9999，另一个人写了 z-index: 10000，层级很快就会陷入混乱。
为了保全自己组件内部的层级不被外部干扰，就会用 isolation: isolate;
2. 配合mix-blend-mode
mix-blend-mode混合模式，可以将元素内容与背景进行颜色混合、正片叠底、滤色等视觉效果，
如果没有限制，这个混合效果会一路穿透，把网页最底层的 <body> 背景色也一起混合进去，
这时候，加上用 isolation: isolate 相当于把这一块区域圈起来，浏览器混合时只在这个容器内部生效
七、最后
本来只是解决头像悬浮名片被图片覆盖的问题
没想到还有意外收获，把论坛原生的上一张、下一张切换按钮找出来了
（除了预览图片有切换按钮，帖子内部也会有切换按钮）
（不知道为了XX泥潭引入了isolation，目前用下来没看到有什么图片错位的Bug）
（希望泥潭能从根本上修复这个Bug，这样就不用安装脚本，每个人都能用上）
最终代码
@Name @Name @Name @Name @Name
补充：代码区里的@name避坑
1. 自动替换代码的“@name 注释”
猴脚本的元数据头，有个 // @name 脚本名称 声明
论坛自带一个智能的 @功能，会进行替换
当把代码放到论坛的代码区并点击发布后，代码区中的注释，会被自动替换为 @name
2. 防替换方法
既然泥潭会替换，那么在代码区上方，人为放置一个纯文本的 @Name ，泥潭就会解析替换代码区外的
有时候，会多次编辑、修改帖子，当保存时，论坛会再次触发解析替换
在代码区上方多放两三个纯文本的 @Name。 每次修改就让它替换一个，像多层护盾一样
3. 复制他人的坑
复制他人的代码区上方的挡箭牌，发现没生效
这是@Name已经被替换过，变成蓝色超链接，不会再次被替换
当直接粘贴（Ctrl+V），会把底层的富文本标签一起粘贴进去
所以，右键粘贴时候，一定要选择以纯文本格式粘贴（或者 Ctrl+Shift+V 纯文本粘贴）
// ==UserScript==
// @name GM-图片切换按钮
// @namespace http://tampermonkey.net/
// @version 2026-07-19
// @description修复图片切换按钮
// @author 712448
// @match https://*.gamemale.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=gamemale.com
// @grant none
// @noframes
// ==/UserScript==
(function () {
const imgFixed = () => {
const style = document.createElement('style');
style.innerHTML = `
* {
isolation: auto !important;
}
`;
const target = document.head;
if (!target) return;
target.appendChild(style);
}
imgFixed()
})();
这个问题确实遇到过，一般都是刷新页面解决，使用脚本会更方便一些 楼主好仔细的分析问题啊~{:4_91:}
虽然个人也常遇到这问题~都是直接按F5刷新解决~但有个好用的脚本直接处理挺好的~感谢楼主分享惹呢{:4_86:} 有遇到過這個問題，嘗試一下樓主的腳本。 这个是真全面深挖解答了我一直以来的疑问https://gcore.jsdelivr.net/gh/googlefonts/noto-emoji/svg/emoji_u1f642_200d_2195.svg还附赠解答大家说的拜@Name的原因https://gcore.jsdelivr.net/gh/googlefonts/noto-emoji/svg/emoji_u1f63d.svg 这个问题优化了确实更方便看帖了 确实经常遇到这样的问题呢 优化后会舒服很多了 之前一直知道有这个问题，总是找到解决方法的脚本了。 这种情况真的是很常见呢，感谢楼主分享思路 最近也遇到了这种情况，我一般就往下滑到评论的位置看名片（不过我最常遇到的是点开图片，图片左上角会出现下载的页面挡住上面的部分文字） 好复杂呀，这个问题我还没遇见过，看了一两遍才弄懂怎么回事 吼(´×ω×`)这种也不知道能不能直接让坛花他们修修咧 感谢分享思路
确实这样弄方便很多了 好神奇，但感觉我们应该不太会用上？ 嗯····其实蛮有用的，但这个论坛要加载的插件也太多了吧（捂脸 感觉这个叫name的坛友经常会有@提醒{:6_167:} 每次遇到这种问题都是直接刷新解决的，这下有脚本就方便很多了 这样就不用老是刷新来解决这种情况了 之前看到有人说泥潭很多组件都是买的，估计这种bug很难修复吧，很多小bug都是靠坛友们的脚本修修补补 不是说论坛，而是坛子套的这个壳年久失修了就有各种问题，比如也是这套壳的tt1069之类的也会有相同的情况x
页:
[1]
2