看板 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
※ 同主題文章:
Re: [無言] 這個驗證碼到底要填什麼?
12-13 15:38 fishet4.
推 zp413122: 不要這樣 我是文組 我看不懂XD2F 12/13 15:41
推 wuyutt: 請右轉聰明版……4F 12/13 15:42
阿阿 我真的笨了 因為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
※ 編輯: fishet4 (59.124.29.1), 12/13/2017 16:19:14
推 doluir: 太聰明啦聰明版版友15F 12/13 16:23
推 han9917: 原來是這樣(假裝自己看得懂17F 12/13 16:26
推 ww1215: 原來哦(頭上都是問號19F 12/13 16:34
→ wdocz: ....看不懂21F 12/13 16:38
推 zhttp: 我發現了 可能跟我的螢幕解析度我關係 我的是4K的
有22F 12/13 16:40
推 recscy: 感謝專業回文~ (假裝看懂27F 12/13 16:51
推 thewtf: 要推才不會丟理組的臉32F 12/13 17:09
推 Gemhom: 專業版!!39F 12/13 17:37
推 cdnokia: 這是笨版不是你該來的地方41F 12/13 17:39
推 li143: 樓主很專業的繞了條遠路44F 12/13 17:42
推 awfulday: 我看的懂.....我真的看的懂喔...(這三小XDD47F 12/13 17:57
推 cimskp: XDDDDDDDDD48F 12/13 17:57
→ fcz973: 阿鬼你還是講中文好了50F 12/13 18:02
推 Usaria: 笨點是樓主太認真了嗎xdd51F 12/13 18:07
推 sun1993: 嗯………看不懂(原來如此啊52F 12/13 18:09
推 Mark87: 先推不然別人以為我看不懂54F 12/13 18:26
推 OGCed: 某樓7pupu56F 12/13 18:30
噓 NingK: 噓你在這裡認真63F 12/13 18:50
推 km101km: 那如果css給上!important呢66F 12/13 19:04
推 isscat: 你出去! 太聰明了!70F 12/13 19:41
推 Bimatow: 害我跳去外面又回來看兩次75F 12/13 20:05
推 bunnyer: 這裡不是笨版嗎?快出去81F 12/13 20:32
推 tdtzhwh: 看不懂,不過感覺好像很厲害82F 12/13 20:32
推 florTW: 聰明板……84F 12/13 20:38
→ ajo865: 我以為這裡是笨板87F 12/13 20:50
推 Zzzip: 推88F 12/13 20:52
推 watcha: What?!90F 12/13 21:07
→ unfair: 聰明版棒棒92F 12/13 21:23
推 Marabuda: 怕 先推以免被發現我看不懂93F 12/13 21:26
推 vitaume: 快推免得別人以為我們不懂97F 12/13 21:54
推 SESAO: 這是什麼版?101F 12/13 22:11
→ GARIGI: 笨版都不笨了啦QQ105F 12/13 22:40
推 tom0927: 太專業了ㄅ 趕快推個 不然被發現看不懂106F 12/13 22:53
推 yayzh: 文組錯了嗎QQ107F 12/13 22:55
推 lininu: 結果是CHROME XD 我以為是IE... 沒看原始碼還猜他不會是圖然後設了table-cell的height... 但我記得chrome在12px(還是10px)以下的字看起來都一樣,所以是前端在切的時候沒注意嗎...
欸我錯了,那個是套件css... 應該要去github回報一下 哈哈109F 12/13 23:06
推 aq200aq: 難得看到自己懂的XDDDD114F 12/13 23:13
推 xxpin: 太聰明了117F 12/13 23:40
推 icexfox: 沒錯,跟我想的差不多125F 12/14 01:00
推 LCA710: 看不懂拉131F 12/14 02:22
推 tzTillie: 太聰明了啊!解釋到連笨版常客都看懂了啊!134F 12/14 03:53
推 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
※ 編輯: fishet4 (59.124.29.1), 12/14/2017 10:09:52
推 ru486: 看不懂照推~145F 12/14 10:06
推 Fraining: 趕快推 不能被發現自己是文組149F 12/14 11:11
推 Survey: 這裡是笨版欸.........151F 12/14 11:54
推 Imdream: 原PO太聰明 害人去找聰明版了153F 12/14 12:28
推 vi000246: 用文字的驗證碼更好破解 說不定我判斷星星數就能知道
是什麼數字了 連openCV都用不到158F 12/14 15:33
推 hsp790604: 專業(怎麼辦,樓主在教什麼,我怎麼看不懂,趕快跟推,才不會被人笑不懂160F 12/14 15:41
--