【梦游列国】画猜看不到图?一句脚本即可修复！
本帖最后由 GMagels 于 2024-4-17 15:21 编辑你画我猜区一直存在一个谜一样的问题，就是有的时候发出去一个题，点开了却看不到题目以及提示字数。只能看到讨论区的讨论，本来在右侧的讨论对话框会变化到左侧。这个问题的出现肥肠薛定谔，属于有的时候显示正常，但有的时候发出来就会看不到图。
曾经有坛友给出了看到字数的解决方案，链接在这里：https://www.gamemale.com/forum.php?mod=viewthread&tid=130715
结论是通过调整页面显示比例，能够看到提示的字数和标题，但是与此同时，讨论框会"消失"。
那么今天通过各种尝试，终于是在自己的设备上找到了该问题的原因，并写了一个脚本来解决这个问题。找问题的过程以及找到的问题分析就放在 Part 2了，感兴趣的可以自行查看。
static/image/hrline/4.gif
解决分支1：我不想用脚本。
经过这样那样的测试，楼主得出的不靠谱结论是，当你画我猜的题干小于等于3个字符时会出现该显示bug, 题干大于3个字符的题目暂时未发现该问题。ps题干太长，超过一行也会
举例
可能出现问题的题干：“是苹果”-3个字符
不会出现问题的题干：“是苹果？” -4个字符
static/image/hrline/4.gif
解决分支2：我可以接受脚本，来吧！
关爱土豆，人人有责（划掉）: 该脚本只涉及对本地网页显示结构的调整，理论上不会主动增加土豆服务器的压力
免责叠甲2: 该脚本只在自己的设备(chrome,PC,15英寸)上测试过，在例如手机或者其他不同显示尺寸的屏幕上的显示效果均未测试，不保证有效，如无效请及时反馈
//@Name
无图标简洁版：// ==UserScript==
// @name 猜苹果修复补丁
// @namespace https://www.gamemale.com/space-uid-687897.html
// @homepage https://www.gamemale.com/thread-133267-1-1.html
// @version 0.1
// @description修复标题三个字符以内显示异常的问题
// @author 瓦尼
// @match https://www.gamemale.com/plugin.php?id=viewui_draw*
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
GM_addStyle(".flb em{float:none !important}");
})();
添加了一个苹果图标，这样在脚本列表里就不再会是白色的默认图标了，不过代码就变长，变得不简洁了，一起放上来各位自行选择吧.
图标版：// ==UserScript==
// @name 猜苹果修复补丁
// @namespace https://www.gamemale.com/space-uid-687897.html
// @homepage https://www.gamemale.com/thread-133267-1-1.html
// @version 0.1
// @description修复标题三个字符以内显示异常的问题
// @author 瓦尼
// @match https://www.gamemale.com/plugin.php?id=viewui_draw*
// @grant GM_addStyle
// @icon data:image/png;base64,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
// ==/UserScript==
(function () {
'use strict';
GM_addStyle(".flb em{float:none !important}");
})();
Part 1 到此就结束了，感兴趣的小伙伴可以回头去看 Part 2 的原因分析。(回到最上方目录点击Part2即可)
虽然参与的活动第一阶段是不需要追随就能拿勋章的，但是如果各位觉得好用的话，也欢迎给个免费的追随。
static/image/hrline/4.gif补充：极长题干测试版评论区有友友反馈不仅是题干少于三个字的情况，极长的题干也会显示异常，经过验证确实会有这种情况。
在使用了前面提供的脚本之后，即便是长题干也可以看到图和提示，但是由于排版限制，只能看到题干结尾的部分。
于是就有了这个测试版，使用之后长题干也能正常显示了。对于超过一行的题干，题干也能显示全。效果图如下：
// ==UserScript==
// @name 猜苹果修复补丁
// @namespace https://www.gamemale.com/space-uid-687897.html
// @supportURL https://www.gamemale.com/thread-133267-1-1.html
// @version 0.1
// @description修复题干在三个字符以内或超出一行的显示异常问题
// @author 瓦尼
// @match https://www.gamemale.com/plugin.php?id=viewui_draw*
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
GM_addStyle(`
.flb em{
float:none !important;
}
#fwin_viewui_draw_guess .bd{
overflow:visible!important;
}
#fwin_viewui_draw_guess .bd .flb{
height:auto!important;
min-height:40px;
}
`);
})();
static/image/hrline/4.gif后记
发帖之前没有注意之前已经大佬做过画猜的修复类似功能的补丁(如果有找到大概也不会费劲去做这个脚本了)，给各位带来了不好的体验。至于为什么不删帖，这篇帖子的重点其实不是P1的脚本而是P2的BUG原理阐明分析。
大佬做的修复补丁链接：[心得] 【猴油脚本】你画我猜增强 作者:某乖leo
这个脚本里大佬通过规定题干元素的宽度最值修复了显示的BUG，除此之外大佬还制作了通过请求信息来显示画猜出题人的功能，可以说是非常便利了。但是在面对出现次数较少的长文本题干时，该脚本因为题干元素宽度被限制而无法显示完全。
那如何能在显示出题人的同时，显示长文本的题干呢？试了一下，同时打开两个脚本是一种方法。当然也可以选择将这个补丁和大佬的脚本合并，这里介绍一下合并的具体方法。
首先复制以下代码：
GM_addStyle(`
.flb em{
float:none !important;
}
#fwin_viewui_draw_guess .bd{
overflow:visible!important;
}
#fwin_viewui_draw_guess .bd .flb{
height:auto!important;
min-height:40px;
}
`);删除大佬原有脚本第十九行的GM_addStyle开头的代码（只需要删这一行，不要删多了)，然后粘贴上面的代码即可完成合并。
现在，不管是长文本的题干还是短文本的题干，各位都可以在保有原来的显示出题人功能的同时看全问题了。
其实看不见的图并没有消失，只是被隐藏了，这个图实际还是能看到最下面的一点点部分的，如下图所示：那么，是什么原因让这幅图的位置从本来应该在的讨论栏左侧变到讨论栏右上方的呢？为此，楼主在调试网页时删除了overflow的hidden属性，结果出现了这样的画面：没错，所有元素都没有消失，只是因为某个原因导致排版乱了，然后overflow属性将范围以外的部分全部隐藏了。
那究竟为什么会乱排版呢，这又和出的题目长短有什么关联呢？
正在这一筹莫展之际，楼主在捣鼓题目部分的样式代码的时候无意之间把float属性删了，唉，你猜怎么着？排版居然好了。
看来乱排版的罪魁祸首就是这个float属性了，大概率是因为出的文字太短然后题目的配图顺势挤上去了。上图是你画我猜界面的主要几个div构成，不过想了想按道理来说不应该啊，配图和标题都分属于不同的div里面，float为什么会因为文字长短跑到上面的这个div呢。
经过一番查找，找到了最终原因：是Float浮动自身的特性即"当元素应用了float属性后，将会脱离普通流，元素脱离【普通文本流】，且不占位置"
什么意思呢，当元素被赋予了float属性，相当于单独开了个新的上层图层，盖在与他重合的普通元素上面（文字则会环绕)，当新的元素被赋予了float，他也会进入这个之前新开的上层图层，并按照规则排版。更具体的解释可以参考：https://blog.csdn.net/qq_36595013/article/details/81810219
这里我写了一段代码，模拟了一下这个问题，给位可以自己试着运行一下：去这个网址：https://www.w3school.com.cn/tiy/t.asp?f=css_layout_float_1全选代码，然后替换为以下的代码：<!DOCTYPE html>
<html>
<head>
<style>
#test1 {
background:green;
height:40px;
}
#img1 {
background: blue;
float: left;
width: 20px;
}
#img3 {
background: pink;
float: right;
}
#imgEx {
background:red;
float:left;
}
#caiti {
background:yellow;
height:100px;
}
</style>
</head>
<body>
<div id="caiti">
<div id="test1">
<em id="img1">题干</em>
<span id="img3">叉叉</span>
</div>
<div id="imgEx">
123
</div>
</div>
</body>
</html>
可以看到红色imgEX在它的DIV里，它的前面是没有任何东西的，按照道理来说，设置了float left，它应该贴着左侧才对。
但是，如你所见它并没有，而是与左侧产生了一定的距离，仿佛是接在了蓝色块后面一样。
如果放大一下这个接头处，会发现其实这两个float元素的高的部分其实是稍稍有所重叠的，如下图：
那么结合之前了解的float特性就可以知道了，这红色和蓝色元素都被赋予了float属性，所以在同一图层内。
虽然后来的红色部分和蓝色部分并不在同一个父元素DIV里，但是蓝色部分因为float属性超过了它自己的的父元素div一点点，盖到了红色部分的父元素DIV。
再加上条件-红色DIV加蓝色DIV的宽度是小于父元素DIV的宽度的，以上这些原因一起，导致红色部分在排版时按照float规则，被迫要接在蓝色的宽度后面，而不是紧贴自己的父元素DIV左侧。
理解了这个问题，这次出现的你画我猜问题就好懂了。通过调试把页面里相关元素的颜色变一下：唉，你就会发现，还真是有一点点重叠。而为什么会重叠呢？细细的来看一下是哪个元素超出头了：没错，就是这个复制链接的em元素，它的父元素是高度40，但是它自身却高40.8，就是这多出来的0.8px导致了排版错乱。当用户提供的标题太短，使得行内能塞下图片DIV的宽度时，底下的图片DIV就会因为float属性跑到上面去，从而造成了消失的假象。
那么，这个脚本是怎么解决这个问题的呢？直接把标题DIV内部的左侧两个em的float属性删了，把他们从float的图层中踢出去跟其他元素一起排版，这样就解决问题了。
嘿嘿，可算解释完了，至此你画我猜的图片显示错误bug原因分析，结束！感谢阅读！
挺实用的脚本呢，可以解决看不到图问题了。 据我所知，超长的题干也会在标准设置的情况下出现画面的缺失，因为我经常出超长的题干{:6_188:} 很有用的脚本惹，画猜区看不到图的话确实挺烦恼的 之前倒是发现把浏览器放大到125%可以显示出来 吼(´×ω×`)第一种咱还没遇到过，第二个问题倒是偶尔碰到过欸～每次都得刷新一下的 QAQ 确实 原来看不到图片不是我的问题呀 jpg 一直以为是网络问题 搞半天不是我的问题啊，还以为每次看不到图都是我的原因 不知道楼主能不能解决那种题目太长导致的显示问题，比如这个画猜https://www.gamemale.com/plugin. ... =guess&drawid=33524
确实有时候会看不见题目的说，不过很久没逛画猜了{:6_167:} 有时候点开看不到图,金币就这样溜走了.{:6_189:}
感谢脚本~{:6_200:} 好实用的一个脚本，画猜的问题又解决了一个~ 我用的是leo发的猜画修复脚本，还可以看出题者很方便，不过我本来除了问题字数太长的情况以外没有遇到过画作、提示消失的问题。 已经放弃画猜区惹，各种看不懂惹 有时候你画我猜的题目太烧脑子了，所以就只挑相对简单的来了hhh
很不错的脚本，收藏一波~ 看了下具体原因分析，确实看不懂，感觉好硬核 太厉害了！会编程的就是不一样:$ 偶尔会遇到这种问题我就是直接去看别的了，毕竟反正大部分也猜不到 非常好的探索案例，发现问题，定位问题，解决问题一条龙
建议广大坛友学习 之前看有人说这个bug，还是坛里大佬多啊
页:
[1]
2