Re: [無言] 這個驗證碼到底要填什麼？

[fishet4 (瞇瞇)]

依照圖片來看，我想樓主使用的是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://www.ptt.cc/bbs/StupidClown/M.1513150742.A.268.html
推 ab784533: 聰明版！！！！
推 zp413122: 不要這樣 我是文組 我看不懂XD
推 asd15723: 樓下文組會噓你
推 wuyutt: 請右轉聰明版……
推 Porara98763: 推 雖然什麼都看不懂XD
推 mark0204:
推 tery623: 有文組懶人包嗎？
推 iop982002: 推 看到原文的*就發現了XD
推 v00623: 推個
推 Jenny0725: 你真的有職業病
推 zhttp: 可是我用chrome 原設定都沒改 也是正常啊
→ 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了吧XD
真的嗎!!! 難道是版本差異嘛，哈哈哈，不過我好像沒必要這麼認真齁XDDDD
推 wanting0314: 先推免得被人發現我看不懂
※ 編輯: fishet4 (59.124.29.1), 12/13/2017 16:19:14
推 doluir: 太聰明啦聰明版版友
推 HANJIUN: 聰明人請離開笨版
推 han9917: 原來是這樣（假裝自己看得懂
推 ping780520: 趕快跟著推以免被發現我看不懂
推 ww1215: 原來哦（頭上都是問號
→ penny841028: 走錯版了啦！
→ wdocz: ....看不懂
推 zhttp: 我發現了 可能跟我的螢幕解析度我關係 我的是4K的
→ zhttp:                              有
推 Standattoe: 推
推 watergreen98: 推
推 bightb56913: 長知識了
推 recscy: 感謝專業回文~ (假裝看懂
推 sophena1990: 笨版都不笨版了啦
推 erinneedslov: 聰明版
推 Ruruto49: 我以為我走到聰明版
推 s12358972: 推
推 thewtf: 要推才不會丟理組的臉
推 GohHiong: 走錯版了吧XD
推 tp6fu6fu6: 看不懂，但是推專業
推 bananas1022: 你太聰明了
推 mihono: 推專業!
推 remprogress: 走錯版了
推 fervorya: 嗚嗚你好聰明
推 Gemhom: 專業版!!
推 elbertintw: 推一下才表示我看的懂
推 cdnokia: 這是笨版不是你該來的地方
推 b506102089: 專業推～
推 sunbiba: 走錯板了  好笨
推 li143: 樓主很專業的繞了條遠路
推 KIMandZJ: 走錯版了你！
推 leherisson: 你在說什麼？太聰明了！！！！！
推 awfulday: 我看的懂.....我真的看的懂喔...(這三小XDD
推 cimskp: XDDDDDDDDD
噓 Brabus700G: 這叫專業？
→ fcz973: 阿鬼你還是講中文好了
推 Usaria: 笨點是樓主太認真了嗎xdd
推 sun1993: 嗯………看不懂（原來如此啊
推 ox12345xo: \我看得懂/
推 Mark87: 先推不然別人以為我看不懂
推 Kuromi0929: 你不要那麼專業好嗎
推 OGCed: 某樓7pupu
推 classes: 完全不想懂XDD
推 Jill0105: 可惡～欺負文組人～
推 DoubleVial: 你不是笨板人
推 zoepeng: 推
推 chenuu: https://i.imgur.com/aeiPn5K.jpg
→ shellback: 國泰資訊人員會感謝你幫debug
噓 NingK: 噓你在這裡認真
推 chuchushoes: chrome本來就很爛，又肥又卡
推 littlebear07: 走錯啦
推 km101km: 那如果css給上!important呢
推 breakblue: https://i.imgur.com/KGPMG81.jpg 異常的勵志
推 coolda: 上課囉~
推 amritavoice: 你太聰明了，請左轉聰明版喔！
推 isscat: 你出去! 太聰明了!
推 breeze1128: 原來是這樣（開始裝懂）
推 Naku0818: 這裡不適合你！！！
推 foreverwings: 請右轉聰明版～
推 hcyanita: 推 長知識~
推 Bimatow: 害我跳去外面又回來看兩次
推 beyondboy: 太專業了吧 巨匠4你?
推 icexfox: 等等，這是笨版吧
→ prettiestmrs: 去聰明版喇xD
推 judge1226: 樓主是聰明版的吧
推 iwillbehere: 推  笨板知識+
推 bunnyer: 這裡不是笨版嗎?快出去
推 tdtzhwh: 看不懂，不過感覺好像很厲害
推 sandwichchen: 這裡不是笨板嗎?(搔頭)XD
推 florTW: 聰明板……
推 cosrabbit: 聰明版www
推 wuyiulin: 笑
→ ajo865: 我以為這裡是笨板
推 Zzzip: 推
推 gipo776: 推
推 watcha: What？！
推 addycat: 左轉聰明板
→ unfair: 聰明版棒棒
推 Marabuda: 怕 先推以免被發現我看不懂
推 darling520: 幫文組QQ
推 minnie4227: 您驗證碼系？
推 speedest555: 恩 跟我想的一樣
推 vitaume: 快推免得別人以為我們不懂
推 firerycon: 朝聖推
→ liu1637: 長知識版
推 pisces2826: 趕快推，不然人家以為我不懂
推 SESAO: 這是什麼版？
推 sakura3034: 有看沒懂我果然沒走錯版
→ peiyuchen: 不懂，但推專業
→ Ambition0114: 87平衡剪頭
→ GARIGI: 笨版都不笨了啦QQ
推 tom0927: 太專業了ㄅ  趕快推個 不然被發現看不懂
推 yayzh: 文組錯了嗎QQ
推 mikazeray: 67樓的圖也太勵志了XDDD
推 lininu: 結果是CHROME XD 我以為是IE... 沒看原始碼還猜他不會是圖
→ lininu: 然後設了table-cell的height... 但我記得chrome在12px(還
→ lininu: 是10px)以下的字看起來都一樣，所以是前端在切的時候沒注
→ lininu: 意嗎...
推 lininu: 欸我錯了，那個是套件css... 應該要去github回報一下 哈哈
推 aq200aq: 難得看到自己懂的XDDDD
推 makohasa: 聰明板
推 duninafan: 哈哈 推專業～
推 xxpin: 太聰明了
推 papple23g: 推
推 imjeffreylee: 看得懂給推
→ imjeffreylee: 文組別再要懶人包了 再懶的懶人包你也看不懂
推 aaronchuu: 看得懂推
推 aaronchuu: 爆
推 greecewoods: 文組頭很痛（舉手）
推 pikachu107: 抱歉走錯版
推 icexfox: 沒錯，跟我想的差不多
推 wulearn3310: 推推
→ dapwo241: 文組像在看當天書
推 fattygirl: 啊啊啊啊啊啊看不懂
推 cmid05: XD
推 a092197z: 推專業！
推 LCA710: 看不懂拉
推 SkySwimmer: 錯版了啦XDD
推 staynero8007: 你太聰明惹
推 tzTillie: 太聰明了啊！解釋到連笨版常客都看懂了啊！
推 Pictor: 專業推
推 howardhope: 我也是這樣覺得
推 zoe1000737: QQ看不懂
推 sds0331: 原來如此
推 dododoremi: 聰明板
推 pepro: 第一次知道chrome有這麼奇怪的設定
推 bigbeat: 原來4網頁設計師啊
推 Mozar: 有卦有推
推 mumudi: 這跟文組無關吧，做網頁設計的也會懂
推 allenho: 滾，離開笨板
※ 編輯: fishet4 (59.124.29.1), 12/14/2017 10:09:52
推 ru486: 看不懂照推～
推 okijn5566: 你就告訴我要填什麼就好了
推 ErROrGG: 文組：供三小
→ KDragon3615: 看不懂！！
推 Fraining: 趕快推 不能被發現自己是文組
推 slimc0527: 請不要拉高笨版程度好嗎
推 Survey: 這裡是笨版欸.........
推 elvisleeee: 認真什麼啦
推 Imdream: 原PO太聰明 害人去找聰明版了
推 coco1104520: 天啊太聰明
推 Nakazone: 你錯版了啦XDDDD
推 timh3316: 樓下看不懂怒噓
推 qaz559: 天ㄚ
推 vi000246: 用文字的驗證碼更好破解 說不定我判斷星星數就能知道
→ vi000246: 是什麼數字了 連openCV都用不到
推 hsp790604: 專業（怎麼辦，樓主在教什麼，我怎麼看不懂，趕快跟推
→ hsp790604: ，才不會被人笑不懂
推 dandingduck: 推
推 RiTaYin: 您說的是中文嗎
推 pong9001: 推 聰明教學文
推 im5jsu06: 推專業
推 gngn5566: 請右轉聰明板
推 areare38: 需要文組懶人包
推 jhongsian: 啃太專業推
推 goldstorm: 還好看得懂 長知識了呢！
推 YaCi98: 錯版囉
推 key1000: 連我這文組都看的懂惹
推 evaal: 欺負文組給噓
推 Ephraim: 你走錯版了吧....
推 rcak801: 但這個驗證碼對電腦判斷根本沒用 完全無法阻止惡意攻擊
推 iflost: 推專業
推 andy6001: 這不是笨版，漲知識了
推 bill91305: 長知識了，左轉聰明版
推 aic8382: 笨點是原PO很搞剛的繞了一大圈 發現有更簡單的解法阿
推 rj486: 看完你這篇我頭都痛了.
推 lazybonebone: 專業推
推 sorryfly: 太聰明了
推 ForgerEames: 推看笨版長知識XD
推 aacj2642: 好猛
推 magicsiren: 聰明推，感謝教學XD
推 JANUARZ: 哇
推 jack0216: 以為走錯地方