顯示廣告
隱藏 ✕
回列表(←)
Disp BBS guest 註冊 登入(i) 線上人數: 555
首頁(home) 上頁(↑) 下頁(↓) 末頁(end)
※ 本文為 MindOcean 轉寄自 ptt.cc 更新時間: 2017-12-14 18:04:58
看板 StupidClown
作者 fishet4 (瞇瞇)
標題 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
※ 文章代碼(AID): #1QCDaM9e (StupidClown)
※ 文章網址: https://www.ptt.cc/bbs/StupidClown/M.1513150742.A.268.html
※ 同主題文章:
　 12-13 11:45 recscy. ■ [無言] 這個驗證碼到底要填什麼？
　 12-13 13:16 zhttp. ■ Re: [無言] 這個驗證碼到底要填什麼？
● 12-13 15:38 fishet4. ■ Re: [無言] 這個驗證碼到底要填什麼？
推 ab784533: 聰明版！！！！1F 12/13 15:41
推 zp413122: 不要這樣 我是文組 我看不懂XD2F 12/13 15:41
推 asd15723: 樓下文組會噓你3F 12/13 15:42
推 wuyutt: 請右轉聰明版……4F 12/13 15:42
推 Porara98763: 推 雖然什麼都看不懂XD5F 12/13 15:44
推 mark0204:6F 12/13 15:48
推 tery623: 有文組懶人包嗎？7F 12/13 15:50
推 iop982002: 推 看到原文的*就發現了XD8F 12/13 15:52
推 v00623: 推個9F 12/13 16:00
推 Jenny0725: 你真的有職業病10F 12/13 16:01
推 zhttp: 可是我用chrome 原設定都沒改 也是正常啊11F 12/13 16:05
→ zhttp: https://i.imgur.com/eULrvMB.jpg
[圖]
 
阿阿 我真的笨了 因為Chrome裡面是可以調整最小字體大小
https://i.imgur.com/0iXS9K5.png
[圖]
 
所以調成5或以下就可以了喔 哈哈哈哈
※ 編輯: fishet4 (59.124.29.1), 12/13/2017 16:12:22
推 zhttp: 沒有啊 原設定12就可以了 該不會我用到假的chrome了吧XD13F 12/13 16:16
真的嗎!!! 難道是版本差異嘛，哈哈哈，不過我好像沒必要這麼認真齁XDDDD
推 wanting0314: 先推免得被人發現我看不懂14F 12/13 16:17
※ 編輯: fishet4 (59.124.29.1), 12/13/2017 16:19:14
推 doluir: 太聰明啦聰明版版友15F 12/13 16:23
推 HANJIUN: 聰明人請離開笨版16F 12/13 16:24
推 han9917: 原來是這樣（假裝自己看得懂17F 12/13 16:26
推 ping780520: 趕快跟著推以免被發現我看不懂18F 12/13 16:32
推 ww1215: 原來哦（頭上都是問號19F 12/13 16:34
→ penny841028: 走錯版了啦！20F 12/13 16:35
→ wdocz: ....看不懂21F 12/13 16:38
推 zhttp: 我發現了 可能跟我的螢幕解析度我關係 我的是4K的22F 12/13 16:40
→ zhttp:                              有
推 Standattoe: 推24F 12/13 16:46
推 watergreen98: 推25F 12/13 16:49
推 bightb56913: 長知識了26F 12/13 16:50
推 recscy: 感謝專業回文~ (假裝看懂27F 12/13 16:51
推 sophena1990: 笨版都不笨版了啦28F 12/13 16:55
推 erinneedslov: 聰明版29F 12/13 17:00
推 Ruruto49: 我以為我走到聰明版30F 12/13 17:03
推 s12358972: 推31F 12/13 17:05
推 thewtf: 要推才不會丟理組的臉32F 12/13 17:09
推 GohHiong: 走錯版了吧XD33F 12/13 17:11
推 tp6fu6fu6: 看不懂，但是推專業34F 12/13 17:20
推 bananas1022: 你太聰明了35F 12/13 17:28
推 mihono: 推專業!36F 12/13 17:29
推 remprogress: 走錯版了37F 12/13 17:34
推 fervorya: 嗚嗚你好聰明38F 12/13 17:35
推 Gemhom: 專業版!!39F 12/13 17:37
推 elbertintw: 推一下才表示我看的懂40F 12/13 17:38
推 cdnokia: 這是笨版不是你該來的地方41F 12/13 17:39
推 b506102089: 專業推～42F 12/13 17:39
推 sunbiba: 走錯板了  好笨43F 12/13 17:42
推 li143: 樓主很專業的繞了條遠路44F 12/13 17:42
推 KIMandZJ: 走錯版了你！45F 12/13 17:54
推 leherisson: 你在說什麼？太聰明了！！！！！46F 12/13 17:57
推 awfulday: 我看的懂.....我真的看的懂喔...(這三小XDD47F 12/13 17:57
推 cimskp: XDDDDDDDDD48F 12/13 17:57
噓 Brabus700G: 這叫專業？49F 12/13 17:58
→ fcz973: 阿鬼你還是講中文好了50F 12/13 18:02
推 Usaria: 笨點是樓主太認真了嗎xdd51F 12/13 18:07
推 sun1993: 嗯………看不懂（原來如此啊52F 12/13 18:09
推 ox12345xo: \我看得懂/53F 12/13 18:16
推 Mark87: 先推不然別人以為我看不懂54F 12/13 18:26
推 Kuromi0929: 你不要那麼專業好嗎55F 12/13 18:28
推 OGCed: 某樓7pupu56F 12/13 18:30
推 classes: 完全不想懂XDD57F 12/13 18:37
推 Jill0105: 可惡～欺負文組人～58F 12/13 18:45
推 DoubleVial: 你不是笨板人59F 12/13 18:46
推 zoepeng: 推60F 12/13 18:47
推 chenuu: https://i.imgur.com/aeiPn5K.jpg61F 12/13 18:47
[圖]
 
→ shellback: 國泰資訊人員會感謝你幫debug62F 12/13 18:47
噓 NingK: 噓你在這裡認真63F 12/13 18:50
推 chuchushoes: chrome本來就很爛，又肥又卡64F 12/13 18:53
推 littlebear07: 走錯啦65F 12/13 19:02
推 km101km: 那如果css給上!important呢66F 12/13 19:04
推 breakblue: https://i.imgur.com/KGPMG81.jpg 異常的勵志67F 12/13 19:07
[圖]
 
推 coolda: 上課囉~68F 12/13 19:11
推 amritavoice: 你太聰明了，請左轉聰明版喔！69F 12/13 19:13
推 isscat: 你出去! 太聰明了!70F 12/13 19:41
推 breeze1128: 原來是這樣（開始裝懂）71F 12/13 19:55
推 Naku0818: 這裡不適合你！！！72F 12/13 19:56
推 foreverwings: 請右轉聰明版～73F 12/13 20:03
推 hcyanita: 推 長知識~74F 12/13 20:04
推 Bimatow: 害我跳去外面又回來看兩次75F 12/13 20:05
推 beyondboy: 太專業了吧 巨匠4你?76F 12/13 20:09
推 icexfox: 等等，這是笨版吧77F 12/13 20:14
→ prettiestmrs: 去聰明版喇xD78F 12/13 20:17
推 judge1226: 樓主是聰明版的吧79F 12/13 20:17
推 iwillbehere: 推  笨板知識+80F 12/13 20:19
推 bunnyer: 這裡不是笨版嗎?快出去81F 12/13 20:32
推 tdtzhwh: 看不懂，不過感覺好像很厲害82F 12/13 20:32
推 sandwichchen: 這裡不是笨板嗎?(搔頭)XD83F 12/13 20:33
推 florTW: 聰明板……84F 12/13 20:38
推 cosrabbit: 聰明版www85F 12/13 20:39
推 wuyiulin: 笑86F 12/13 20:47
→ ajo865: 我以為這裡是笨板87F 12/13 20:50
推 Zzzip: 推88F 12/13 20:52
推 gipo776: 推89F 12/13 21:02
推 watcha: What？！90F 12/13 21:07
推 addycat: 左轉聰明板91F 12/13 21:23
→ unfair: 聰明版棒棒92F 12/13 21:23
推 Marabuda: 怕 先推以免被發現我看不懂93F 12/13 21:26
推 darling520: 幫文組QQ94F 12/13 21:27
推 minnie4227: 您驗證碼系？95F 12/13 21:30
推 speedest555: 恩 跟我想的一樣96F 12/13 21:35
推 vitaume: 快推免得別人以為我們不懂97F 12/13 21:54
推 firerycon: 朝聖推98F 12/13 21:55
→ liu1637: 長知識版99F 12/13 22:04
推 pisces2826: 趕快推，不然人家以為我不懂100F 12/13 22:08
推 SESAO: 這是什麼版？101F 12/13 22:11
推 sakura3034: 有看沒懂我果然沒走錯版102F 12/13 22:13
→ peiyuchen: 不懂，但推專業103F 12/13 22:14
→ Ambition0114: 87平衡剪頭104F 12/13 22:17
→ GARIGI: 笨版都不笨了啦QQ105F 12/13 22:40
推 tom0927: 太專業了ㄅ  趕快推個 不然被發現看不懂106F 12/13 22:53
推 yayzh: 文組錯了嗎QQ107F 12/13 22:55
推 mikazeray: 67樓的圖也太勵志了XDDD108F 12/13 22:58
推 lininu: 結果是CHROME XD 我以為是IE... 沒看原始碼還猜他不會是圖109F 12/13 23:06
→ lininu: 然後設了table-cell的height... 但我記得chrome在12px(還
→ lininu: 是10px)以下的字看起來都一樣，所以是前端在切的時候沒注
→ lininu: 意嗎...
推 lininu: 欸我錯了，那個是套件css... 應該要去github回報一下 哈哈
推 aq200aq: 難得看到自己懂的XDDDD114F 12/13 23:13
推 makohasa: 聰明板115F 12/13 23:17
推 duninafan: 哈哈 推專業～116F 12/13 23:28
推 xxpin: 太聰明了117F 12/13 23:40
推 papple23g: 推118F 12/13 23:40
推 imjeffreylee: 看得懂給推119F 12/13 23:48
→ imjeffreylee: 文組別再要懶人包了 再懶的懶人包你也看不懂
推 aaronchuu: 看得懂推121F 12/14 00:01
推 aaronchuu: 爆
推 greecewoods: 文組頭很痛（舉手）123F 12/14 00:11
推 pikachu107: 抱歉走錯版124F 12/14 00:58
推 icexfox: 沒錯，跟我想的差不多125F 12/14 01:00
推 wulearn3310: 推推126F 12/14 01:16
→ dapwo241: 文組像在看當天書127F 12/14 01:17
推 fattygirl: 啊啊啊啊啊啊看不懂128F 12/14 01:47
推 cmid05: XD129F 12/14 01:59
推 a092197z: 推專業！130F 12/14 02:17
推 LCA710: 看不懂拉131F 12/14 02:22
推 SkySwimmer: 錯版了啦XDD132F 12/14 02:31
推 staynero8007: 你太聰明惹133F 12/14 02:40
推 tzTillie: 太聰明了啊！解釋到連笨版常客都看懂了啊！134F 12/14 03:53
推 Pictor: 專業推135F 12/14 04:46
推 howardhope: 我也是這樣覺得136F 12/14 05:39
推 zoe1000737: QQ看不懂137F 12/14 07:07
推 sds0331: 原來如此138F 12/14 08:00
推 dododoremi: 聰明板139F 12/14 09:11
推 pepro: 第一次知道chrome有這麼奇怪的設定140F 12/14 09:17
推 bigbeat: 原來4網頁設計師啊141F 12/14 09:18
推 Mozar: 有卦有推142F 12/14 09:50
推 mumudi: 這跟文組無關吧，做網頁設計的也會懂143F 12/14 09:59
推 allenho: 滾，離開笨板144F 12/14 10:02
※ 編輯: fishet4 (59.124.29.1), 12/14/2017 10:09:52
推 ru486: 看不懂照推～145F 12/14 10:06
推 okijn5566: 你就告訴我要填什麼就好了146F 12/14 10:17
推 ErROrGG: 文組：供三小147F 12/14 10:53
→ KDragon3615: 看不懂！！148F 12/14 10:56
推 Fraining: 趕快推 不能被發現自己是文組149F 12/14 11:11
推 slimc0527: 請不要拉高笨版程度好嗎150F 12/14 11:45
推 Survey: 這裡是笨版欸.........151F 12/14 11:54
推 elvisleeee: 認真什麼啦152F 12/14 12:05
推 Imdream: 原PO太聰明 害人去找聰明版了153F 12/14 12:28
推 coco1104520: 天啊太聰明154F 12/14 12:42
推 Nakazone: 你錯版了啦XDDDD155F 12/14 13:06
推 timh3316: 樓下看不懂怒噓156F 12/14 13:22
推 qaz559: 天ㄚ157F 12/14 13:29
推 vi000246: 用文字的驗證碼更好破解 說不定我判斷星星數就能知道158F 12/14 15:33
→ vi000246: 是什麼數字了 連openCV都用不到
推 hsp790604: 專業（怎麼辦，樓主在教什麼，我怎麼看不懂，趕快跟推160F 12/14 15:41
→ hsp790604: ，才不會被人笑不懂
推 dandingduck: 推162F 12/14 16:15
推 RiTaYin: 您說的是中文嗎163F 12/14 16:23
推 pong9001: 推 聰明教學文164F 12/14 16:39
推 im5jsu06: 推專業165F 12/14 17:14

--
※ 看板: Stupid　文章推薦值: 0 目前人氣: 0 累積人氣: 1105　
※ 本文也出現在看板: Z_sports
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇