作者fishet4 (瞇瞇)
看板StupidClown
標題Re: [無言] 這個驗證碼到底要填什麼？
時間Wed Dec 13 15:38:59 2017
依照圖片來看，我想樓主使用的是Chrome瀏覽器吧
主要是因為Chrome瀏覽器有個很機車的設定，也就是字級小於最小字級的設定是不理會的
(Chrome預設是12px，可以在設定>自訂字型>最小字體找到)
而那塊驗證碼正是使用文字來拼成數字的
怎麼說呢，請看下圖
https://i.imgur.com/7oBo1fK.png
這個是使用開發人員工具去找到的那塊在html的原始碼
(有興趣的人可以在chrome按F12去玩玩)
可以看到它是一串*和空白去組成的( 在html裡會解析成空白格)
然後再找一下它的CSS設定
https://i.imgur.com/nbqZ9CC.png
第一個是字型的設定，第二個就是字型大小的設定
我們這邊看到它設定成5px
這就是問題所在拉，因為Chrome機車的設定
所以你看到的文字是12px大小去組成的驗證碼
也是為什麼你的數字看起來比較扁平的緣故!!!
我們看看firefox
https://i.imgur.com/6FpLph3.png
再看看前端極端厭惡的萬惡的IE
https://i.imgur.com/zTnanO7.png
都是正常的呢
我想這跟當初設計這塊的人忘記了Chrome有這樣的字型大小限制
順道一提，開發者工具裡面的數值可以去修改玩玩看，如果要讓它看起來正常
我們可以修改剛剛看到的line-height那邊的數值
這是指文字的行間距
https://i.imgur.com/afDXLs7.png
把它改成6px看起來就正常多了呢
整體看起來也比較大就是了
或是去上面提到的設定裡面，把字型大小限制調至5px以下
https://i.imgur.com/0iXS9K5.png
回來看就是正常的囉
不得不說想到用文字來拼成驗證碼這個想法挺有趣的
不過可能沒有在Chrome被發現這個問題
(其實也不算問題，是Chrome的好意，小於12px的字在網頁上看起來有點吃力)
我相信這篇如果被他們發現應該會去叫當初作網頁的人修正的吧
畢竟Chrome還是比較多人用的 哈哈哈
笨點的話，我想就是為了回這個文職業病發作和認真去幫忙別人找Bug解法吧，哈哈哈哈
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.124.29.1
※ 文章網址: https://webptt.com/m.aspx?n=bbs/StupidClown/M.1513150742.A.268.html
1F：推 ab784533: 聰明版！！！！ 12/13 15:41
2F：推 zp413122: 不要這樣 我是文組 我看不懂XD 12/13 15:41
3F：推 asd15723: 樓下文組會噓你 12/13 15:42
4F：推 wuyutt: 請右轉聰明版…… 12/13 15:42
5F：推 Porara98763: 推 雖然什麼都看不懂XD 12/13 15:44
6F：推 mark0204: 12/13 15:48
7F：推 tery623: 有文組懶人包嗎？ 12/13 15:50
8F：推 iop982002: 推 看到原文的*就發現了XD 12/13 15:52
9F：推 v00623: 推個 12/13 16:00
10F：推 Jenny0725: 你真的有職業病 12/13 16:01
11F：推 zhttp: 可是我用chrome 原設定都沒改 也是正常啊 12/13 16:05
阿阿 我真的笨了 因為Chrome裡面是可以調整最小字體大小
https://i.imgur.com/0iXS9K5.png
所以調成5或以下就可以了喔 哈哈哈哈
※ 編輯: fishet4 (59.124.29.1), 12/13/2017 16:12:22
13F：推 zhttp: 沒有啊 原設定12就可以了 該不會我用到假的chrome了吧XD 12/13 16:16
真的嗎!!! 難道是版本差異嘛，哈哈哈，不過我好像沒必要這麼認真齁XDDDD
14F：推 wanting0314: 先推免得被人發現我看不懂 12/13 16:17
※ 編輯: fishet4 (59.124.29.1), 12/13/2017 16:19:14
15F：推 doluir: 太聰明啦聰明版版友 12/13 16:23
16F：推 HANJIUN: 聰明人請離開笨版 12/13 16:24
17F：推 han9917: 原來是這樣（假裝自己看得懂 12/13 16:26
18F：推 ping780520: 趕快跟著推以免被發現我看不懂 12/13 16:32
19F：推 ww1215: 原來哦（頭上都是問號 12/13 16:34
20F：→ penny841028: 走錯版了啦！ 12/13 16:35
21F：→ wdocz: ....看不懂 12/13 16:38
22F：推 zhttp: 我發現了 可能跟我的螢幕解析度我關係 我的是4K的 12/13 16:40
23F：→ zhttp: 有 12/13 16:41
24F：推 Standattoe: 推 12/13 16:46
25F：推 watergreen98: 推 12/13 16:49
26F：推 bightb56913: 長知識了 12/13 16:50
27F：推 recscy: 感謝專業回文~ (假裝看懂 12/13 16:51
28F：推 sophena1990: 笨版都不笨版了啦 12/13 16:55
29F：推 erinneedslov: 聰明版 12/13 17:00
30F：推 Ruruto49: 我以為我走到聰明版 12/13 17:03
31F：推 s12358972: 推 12/13 17:05
32F：推 thewtf: 要推才不會丟理組的臉 12/13 17:09
33F：推 GohHiong: 走錯版了吧XD 12/13 17:11
34F：推 tp6fu6fu6: 看不懂，但是推專業 12/13 17:20
35F：推 bananas1022: 你太聰明了 12/13 17:28
36F：推 mihono: 推專業! 12/13 17:29
37F：推 remprogress: 走錯版了 12/13 17:34
38F：推 fervorya: 嗚嗚你好聰明 12/13 17:35
39F：推 Gemhom: 專業版!! 12/13 17:37
40F：推 elbertintw: 推一下才表示我看的懂 12/13 17:38
41F：推 cdnokia: 這是笨版不是你該來的地方 12/13 17:39
42F：推 b506102089: 專業推～ 12/13 17:39
43F：推 sunbiba: 走錯板了 好笨 12/13 17:42
44F：推 li143: 樓主很專業的繞了條遠路 12/13 17:42
45F：推 KIMandZJ: 走錯版了你！ 12/13 17:54
46F：推 leherisson: 你在說什麼？太聰明了！！！！！ 12/13 17:57
47F：推 awfulday: 我看的懂.....我真的看的懂喔...(這三小XDD 12/13 17:57
48F：推 cimskp: XDDDDDDDDD 12/13 17:57
49F：噓 Brabus700G: 這叫專業？ 12/13 17:58
50F：→ fcz973: 阿鬼你還是講中文好了 12/13 18:02
51F：推 Usaria: 笨點是樓主太認真了嗎xdd 12/13 18:07
52F：推 sun1993: 嗯………看不懂（原來如此啊 12/13 18:09
53F：推 ox12345xo: \我看得懂/ 12/13 18:16
54F：推 Mark87: 先推不然別人以為我看不懂 12/13 18:26
55F：推 Kuromi0929: 你不要那麼專業好嗎 12/13 18:28
56F：推 OGCed: 某樓7pupu 12/13 18:30
57F：推 classes: 完全不想懂XDD 12/13 18:37
58F：推 Jill0105: 可惡～欺負文組人～ 12/13 18:45
59F：推 DoubleVial: 你不是笨板人 12/13 18:46
60F：推 zoepeng: 推 12/13 18:47
62F：→ shellback: 國泰資訊人員會感謝你幫debug 12/13 18:47
63F：噓 NingK: 噓你在這裡認真 12/13 18:50
64F：推 chuchushoes: chrome本來就很爛，又肥又卡 12/13 18:53
65F：推 littlebear07: 走錯啦 12/13 19:02
66F：推 km101km: 那如果css給上!important呢 12/13 19:04
68F：推 coolda: 上課囉~ 12/13 19:11
69F：推 amritavoice: 你太聰明了，請左轉聰明版喔！ 12/13 19:13
70F：推 isscat: 你出去! 太聰明了! 12/13 19:41
71F：推 breeze1128: 原來是這樣（開始裝懂） 12/13 19:55
72F：推 Naku0818: 這裡不適合你！！！ 12/13 19:56
73F：推 foreverwings: 請右轉聰明版～ 12/13 20:03
74F：推 hcyanita: 推 長知識~ 12/13 20:04
75F：推 Bimatow: 害我跳去外面又回來看兩次 12/13 20:05
76F：推 beyondboy: 太專業了吧 巨匠4你? 12/13 20:09
77F：推 icexfox: 等等，這是笨版吧 12/13 20:14
78F：→ prettiestmrs: 去聰明版喇xD 12/13 20:17
79F：推 judge1226: 樓主是聰明版的吧 12/13 20:17
80F：推 iwillbehere: 推 笨板知識+ 12/13 20:19
81F：推 bunnyer: 這裡不是笨版嗎?快出去 12/13 20:32
82F：推 tdtzhwh: 看不懂，不過感覺好像很厲害 12/13 20:32
83F：推 sandwichchen: 這裡不是笨板嗎?(搔頭)XD 12/13 20:33
84F：推 florTW: 聰明板…… 12/13 20:38
85F：推 cosrabbit: 聰明版www 12/13 20:39
86F：推 wuyiulin: 笑 12/13 20:47
87F：→ ajo865: 我以為這裡是笨板 12/13 20:50
88F：推 Zzzip: 推 12/13 20:52
89F：推 gipo776: 推 12/13 21:02
90F：推 watcha: What？！ 12/13 21:07
91F：推 addycat: 左轉聰明板 12/13 21:23
92F：→ unfair: 聰明版棒棒 12/13 21:23
93F：推 Marabuda: 怕 先推以免被發現我看不懂 12/13 21:26
94F：推 darling520: 幫文組QQ 12/13 21:27
95F：推 minnie4227: 您驗證碼系？ 12/13 21:30
96F：推 speedest555: 恩 跟我想的一樣 12/13 21:35
97F：推 vitaume: 快推免得別人以為我們不懂 12/13 21:54
98F：推 firerycon: 朝聖推 12/13 21:55
99F：→ liu1637: 長知識版 12/13 22:04
100F：推 pisces2826: 趕快推，不然人家以為我不懂 12/13 22:08
101F：推 SESAO: 這是什麼版？ 12/13 22:11
102F：推 sakura3034: 有看沒懂我果然沒走錯版 12/13 22:13
103F：→ peiyuchen: 不懂，但推專業 12/13 22:14
104F：→ Ambition0114: 87平衡剪頭 12/13 22:17
105F：→ GARIGI: 笨版都不笨了啦QQ 12/13 22:40
106F：推 tom0927: 太專業了ㄅ 趕快推個 不然被發現看不懂 12/13 22:53
107F：推 yayzh: 文組錯了嗎QQ 12/13 22:55
108F：推 mikazeray: 67樓的圖也太勵志了XDDD 12/13 22:58
109F：推 lininu: 結果是CHROME XD 我以為是IE... 沒看原始碼還猜他不會是圖 12/13 23:06
110F：→ lininu: 然後設了table-cell的height... 但我記得chrome在12px(還 12/13 23:06
111F：→ lininu: 是10px)以下的字看起來都一樣，所以是前端在切的時候沒注 12/13 23:06
112F：→ lininu: 意嗎... 12/13 23:06
113F：推 lininu: 欸我錯了，那個是套件css... 應該要去github回報一下 哈哈 12/13 23:11
114F：推 aq200aq: 難得看到自己懂的XDDDD 12/13 23:13
115F：推 makohasa: 聰明板 12/13 23:17
116F：推 duninafan: 哈哈 推專業～ 12/13 23:28
117F：推 xxpin: 太聰明了 12/13 23:40
118F：推 papple23g: 推 12/13 23:40
119F：推 imjeffreylee: 看得懂給推 12/13 23:48
120F：→ imjeffreylee: 文組別再要懶人包了 再懶的懶人包你也看不懂 12/13 23:49
121F：推 aaronchuu: 看得懂推 12/14 00:01
122F：推 aaronchuu: 爆 12/14 00:09
123F：推 greecewoods: 文組頭很痛（舉手） 12/14 00:11
124F：推 pikachu107: 抱歉走錯版 12/14 00:58
125F：推 icexfox: 沒錯，跟我想的差不多 12/14 01:00
126F：推 wulearn3310: 推推 12/14 01:16
127F：→ dapwo241: 文組像在看當天書 12/14 01:17
128F：推 fattygirl: 啊啊啊啊啊啊看不懂 12/14 01:47
129F：推 cmid05: XD 12/14 01:59
130F：推 a092197z: 推專業！ 12/14 02:17
131F：推 LCA710: 看不懂拉 12/14 02:22
132F：推 SkySwimmer: 錯版了啦XDD 12/14 02:31
133F：推 staynero8007: 你太聰明惹 12/14 02:40
134F：推 tzTillie: 太聰明了啊！解釋到連笨版常客都看懂了啊！ 12/14 03:53
135F：推 Pictor: 專業推 12/14 04:46
136F：推 howardhope: 我也是這樣覺得 12/14 05:39
137F：推 zoe1000737: QQ看不懂 12/14 07:07
138F：推 sds0331: 原來如此 12/14 08:00
139F：推 dododoremi: 聰明板 12/14 09:11
140F：推 pepro: 第一次知道chrome有這麼奇怪的設定 12/14 09:17
141F：推 bigbeat: 原來4網頁設計師啊 12/14 09:18
142F：推 Mozar: 有卦有推 12/14 09:50
143F：推 mumudi: 這跟文組無關吧，做網頁設計的也會懂 12/14 09:59
144F：推 allenho: 滾，離開笨板 12/14 10:02
※ 編輯: fishet4 (59.124.29.1), 12/14/2017 10:09:52
145F：推 ru486: 看不懂照推～ 12/14 10:06
146F：推 okijn5566: 你就告訴我要填什麼就好了 12/14 10:17
147F：推 ErROrGG: 文組：供三小 12/14 10:53
148F：→ KDragon3615: 看不懂！！ 12/14 10:56
149F：推 Fraining: 趕快推 不能被發現自己是文組 12/14 11:11
150F：推 slimc0527: 請不要拉高笨版程度好嗎 12/14 11:45
151F：推 Survey: 這裡是笨版欸......... 12/14 11:54
152F：推 elvisleeee: 認真什麼啦 12/14 12:05
153F：推 Imdream: 原PO太聰明 害人去找聰明版了 12/14 12:28
154F：推 coco1104520: 天啊太聰明 12/14 12:42
155F：推 Nakazone: 你錯版了啦XDDDD 12/14 13:06
156F：推 timh3316: 樓下看不懂怒噓 12/14 13:22
157F：推 qaz559: 天ㄚ 12/14 13:29
158F：推 vi000246: 用文字的驗證碼更好破解 說不定我判斷星星數就能知道 12/14 15:33
159F：→ vi000246: 是什麼數字了 連openCV都用不到 12/14 15:33
160F：推 hsp790604: 專業（怎麼辦，樓主在教什麼，我怎麼看不懂，趕快跟推 12/14 15:41
161F：→ hsp790604: ，才不會被人笑不懂 12/14 15:41
162F：推 dandingduck: 推 12/14 16:15
163F：推 RiTaYin: 您說的是中文嗎 12/14 16:23
164F：推 pong9001: 推 聰明教學文 12/14 16:39
165F：推 im5jsu06: 推專業 12/14 17:14
166F：推 gngn5566: 請右轉聰明板 12/14 18:21
167F：推 areare38: 需要文組懶人包 12/14 18:29
168F：推 jhongsian: 啃太專業推 12/14 19:07
169F：推 goldstorm: 還好看得懂 長知識了呢！ 12/14 19:27
170F：推 YaCi98: 錯版囉 12/15 02:50
171F：推 key1000: 連我這文組都看的懂惹 12/15 11:50
172F：推 evaal: 欺負文組給噓 12/15 13:11
173F：推 Ephraim: 你走錯版了吧.... 12/15 13:12
174F：推 rcak801: 但這個驗證碼對電腦判斷根本沒用 完全無法阻止惡意攻擊 12/15 14:09
175F：推 iflost: 推專業 12/16 07:58
176F：推 andy6001: 這不是笨版，漲知識了 12/16 09:25
177F：推 bill91305: 長知識了，左轉聰明版 12/16 14:01
178F：推 aic8382: 笨點是原PO很搞剛的繞了一大圈 發現有更簡單的解法阿 12/17 03:40
179F：推 rj486: 看完你這篇我頭都痛了. 12/17 14:49
180F：推 lazybonebone: 專業推 12/17 16:24
181F：推 sorryfly: 太聰明了 12/18 18:58
182F：推 ForgerEames: 推看笨版長知識XD 12/18 19:50
183F：推 aacj2642: 好猛 12/19 10:22
184F：推 magicsiren: 聰明推，感謝教學XD 12/19 17:57
185F：推 JANUARZ: 哇 12/21 16:43
186F：推 jack0216: 以為走錯地方 12/30 19:52