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

作者: fishet4 (瞇瞇)   2017-12-13 15:38:59
依照圖片來看,我想樓主使用的是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解法吧,哈哈哈哈
作者: ab784533 (laura0129)   2017-12-13 15:41:00
聰明版!!!!
作者: zp413122 (maynine)   2017-12-13 15:41:00
不要這樣 我是文組 我看不懂XD
作者: asd15723 (asd15723)   2017-12-13 15:42:00
樓下文組會噓你
作者: wuyutt (霧魚)   2017-12-13 15:42:00
請右轉聰明版……
作者: Porara98763 (上邪)   2017-12-13 15:44:00
推 雖然什麼都看不懂XD
作者: tery623 (tery623)   2017-12-13 15:50:00
有文組懶人包嗎?
作者: iop982002 (一尾)   2017-12-13 15:52:00
推 看到原文的*就發現了XD
作者: v00623 (阿哩他命EX PLUS)   2017-12-13 16:00:00
推個
作者: Jenny0725 (Jenny瑄)   2017-12-13 16:01:00
你真的有職業病
作者: zhttp (zhttp)   2017-12-13 16:05:00
可是我用chrome 原設定都沒改 也是正常啊https://i.imgur.com/eULrvMB.jpg沒有啊 原設定12就可以了 該不會我用到假的chrome了吧XD
作者: wanting0314 (人生好難OUQ)   2017-12-13 16:17:00
先推免得被人發現我看不懂
作者: doluir (阿冠)   2017-12-13 16:23:00
太聰明啦聰明版版友
作者: HANJIUN (HANJIUN)   2017-12-13 16:24:00
聰明人請離開笨版
作者: han9917   2017-12-13 16:26:00
原來是這樣(假裝自己看得懂
作者: ping780520 (ping780520)   2017-12-13 16:32:00
趕快跟著推以免被發現我看不懂
作者: ww1215 (溜溜)   2017-12-13 16:34:00
原來哦(頭上都是問號
作者: penny841028 (叛逆的兔子)   2017-12-13 16:35:00
走錯版了啦!
作者: wdocz (VK)   2017-12-13 16:38:00
....看不懂
作者: zhttp (zhttp)   2017-12-13 16:40:00
我發現了 可能跟我的螢幕解析度我關係 我的是4K的有
作者: Standattoe   2017-12-13 16:46:00
作者: watergreen98   2017-12-13 16:49:00
作者: bightb56913 (傻勁旺仔)   2017-12-13 16:50:00
長知識了
作者: recscy (央金)   2017-12-13 16:51:00
感謝專業回文~ (假裝看懂
作者: sophena1990 (豆豆綺)   2017-12-13 16:55:00
笨版都不笨版了啦
作者: erinneedslov (Erin)   2017-12-13 17:00:00
聰明版
作者: Ruruto49 (阿魯拖地板)   2017-12-13 17:03:00
我以為我走到聰明版
作者: s12358972 (Spice)   2017-12-13 17:05:00
作者: thewtf (嗆我嗆夠沒)   2017-12-13 17:09:00
要推才不會丟理組的臉
作者: GohHiong (風中吃西瓜)   2017-12-13 17:11:00
走錯版了吧XD
作者: tp6fu6fu6 (超級瑪利)   2017-12-13 17:20:00
看不懂,但是推專業
作者: bananas1022 (黃橙橙香蕉)   2017-12-13 17:28:00
你太聰明了
作者: mihono (帳號拿不回來)   2017-12-13 17:29:00
推專業!
作者: remprogress (rpg)   2017-12-13 17:34:00
走錯版了
作者: fervorya (一丄上止正)   2017-12-13 17:35:00
嗚嗚你好聰明
作者: Gemhom   2017-12-13 17:37:00
專業版!!
作者: elbertintw (How can I forget)   2017-12-13 17:38:00
推一下才表示我看的懂
作者: cdnokia (............)   2017-12-13 17:39:00
這是笨版不是你該來的地方
作者: b506102089 (蘿蔔絲餅餅餅)   2017-12-13 17:39:00
專業推~
作者: sunbiba ( )   2017-12-13 17:42:00
走錯板了 好笨
作者: li143   2017-12-13 17:42:00
樓主很專業的繞了條遠路
作者: KIMandZJ (Kim)   2017-12-13 17:54:00
走錯版了你!
作者: leherisson (soph)   2017-12-13 17:57:00
你在說什麼?太聰明了!!!!!
作者: awfulday (糟糕的一天 櫻雨綿綿)   2017-12-13 17:57:00
我看的懂.....我真的看的懂喔...(這三小XDD
作者: cimskp (イマジネイション=Free)   2017-12-13 17:57:00
XDDDDDDDDD
作者: Brabus700G (路邊賣檳榔的阿伯)   2017-12-13 17:58:00
這叫專業?
作者: fcz973 (名蒸蛋柯南)   2017-12-13 18:02:00
阿鬼你還是講中文好了
作者: Usaria (瞇瞇)   2017-12-13 18:07:00
笨點是樓主太認真了嗎xdd
作者: sun1993 (愛唱歌的太陽)   2017-12-13 18:09:00
嗯………看不懂(原來如此啊
作者: ox12345xo (智者長老)   2017-12-13 18:16:00
\我看得懂/
作者: Mark87 (很重要嗎)   2017-12-13 18:26:00
先推不然別人以為我看不懂
作者: Kuromi0929 (萌萌酷洛米)   2017-12-13 18:28:00
你不要那麼專業好嗎
作者: OGCed (GGININDER )   2017-12-13 18:30:00
某樓7pupu
作者: classes (克來斯伊虱)   2017-12-13 18:37:00
完全不想懂XDD
作者: Jill0105 (Jill)   2017-12-13 18:45:00
可惡~欺負文組人~
作者: DoubleVial (DoubleVial)   2017-12-13 18:46:00
你不是笨板人
作者: zoepeng (:!)   2017-12-13 18:47:00
作者: chenuu (chenuu)   2017-12-13 18:47:00
作者: shellback (shellback)   2017-12-13 18:47:00
國泰資訊人員會感謝你幫debug
作者: NingK (檸~)   2017-12-13 18:50:00
噓你在這裡認真
作者: chuchushoes (chuchushoes)   2017-12-13 18:53:00
chrome本來就很爛,又肥又卡
作者: littlebear07 (小熊07)   2017-12-13 19:02:00
走錯啦
作者: km101km (BaBoom)   2017-12-13 19:04:00
那如果css給上!important呢
作者: breakblue (深蒼)   2017-12-13 19:07:00
作者: coolda (cool)   2017-12-13 19:11:00
上課囉~
作者: amritavoice (笨笨)   2017-12-13 19:13:00
你太聰明了,請左轉聰明版喔!
作者: isscat (issue號:)   2017-12-13 19:41:00
你出去! 太聰明了!
作者: breeze1128 (微微)   2017-12-13 19:55:00
原來是這樣(開始裝懂)
作者: Naku0818 (Naku)   2017-12-13 19:56:00
這裡不適合你!!!
作者: foreverwings (~悠久之翼~)   2017-12-13 20:03:00
請右轉聰明版~
作者: hcyanita (巖午)   2017-12-13 20:04:00
推 長知識~
作者: Bimatow (阿拉花瓜吹喇叭)   2017-12-13 20:05:00
害我跳去外面又回來看兩次
作者: beyondboy (老月)   2017-12-13 20:09:00
太專業了吧 巨匠4你?
作者: icexfox (東玉景)   2017-12-13 20:14:00
等等,這是笨版吧
作者: prettiestmrs (完美賢妻進化論)   2017-12-13 20:17:00
去聰明版喇xD
作者: judge1226 (淡然宇靜)   2017-12-13 20:17:00
樓主是聰明版的吧
作者: iwillbehere (FromNow321)   2017-12-13 20:19:00
推 笨板知識+
作者: bunnyer (lililala)   2017-12-13 20:32:00
這裡不是笨版嗎?快出去
作者: tdtzhwh (玉米骨頭冰淇淋)   2017-12-13 20:32:00
看不懂,不過感覺好像很厲害
作者: sandwichchen (三明治)   2017-12-13 20:33:00
這裡不是笨板嗎?(搔頭)XD
作者: florTW (Flort)   2017-12-13 20:38:00
聰明板……
作者: cosrabbit (Putz)   2017-12-13 20:39:00
聰明版www
作者: wuyiulin (龍破壞劍士-巴斯達布雷達)   2017-12-13 20:47:00
作者: ajo865 (羅斯福路CUXI王)   2017-12-13 20:50:00
我以為這裡是笨板
作者: Zzzip (LOSER)   2017-12-13 20:52:00
作者: gipo776 (幾不)   2017-12-13 21:02:00
作者: watcha (看什麼看)   2017-12-13 21:07:00
What?!
作者: addycat (野喵的命運好好玩)   2017-12-13 21:23:00
左轉聰明板
作者: unfair (怕魚的)   2017-12-13 21:23:00
聰明版棒棒
作者: Marabuda (Marabuda)   2017-12-13 21:26:00
怕 先推以免被發現我看不懂
作者: darling520   2017-12-13 21:27:00
幫文組QQ
作者: minnie4227 (SardineLux)   2017-12-13 21:30:00
您驗證碼系?
作者: speedest555 (嘻嘻)   2017-12-13 21:35:00
恩 跟我想的一樣
作者: vitaume (紫蘇梅)   2017-12-13 21:54:00
快推免得別人以為我們不懂
作者: firerycon (稀奇薯餅)   2017-12-13 21:55:00
朝聖推
作者: liu1637 (路過的牛肉餅)   2017-12-13 22:04:00
長知識版
作者: pisces2826 (小安)   2017-12-13 22:08:00
趕快推,不然人家以為我不懂
作者: SESAO (莎莎歐)   2017-12-13 22:11:00
這是什麼版?
作者: sakura3034 (擔你一輩子♪)   2017-12-13 22:13:00
有看沒懂我果然沒走錯版
作者: peiyuchen (vivian)   2017-12-13 22:14:00
不懂,但推專業
作者: Ambition0114 (鹹魚)   2017-12-13 22:17:00
87平衡剪頭
作者: GARIGI (咖哩雞)   2017-12-13 22:40:00
笨版都不笨了啦QQ
作者: tom0927 (ADSL安裝特派員)   2017-12-13 22:53:00
太專業了ㄅ 趕快推個 不然被發現看不懂
作者: yayzh (yayzh)   2017-12-13 22:55:00
文組錯了嗎QQ
作者: mikazeray (カミカゼ)   2017-12-13 22:58:00
67樓的圖也太勵志了XDDD
作者: lininu (聲音控:P)   2017-12-13 23:06:00
結果是CHROME XD 我以為是IE... 沒看原始碼還猜他不會是圖然後設了table-cell的height... 但我記得chrome在12px(還是10px)以下的字看起來都一樣,所以是前端在切的時候沒注意嗎...欸我錯了,那個是套件css... 應該要去github回報一下 哈哈
作者: aq200aq (肉汁)   2017-12-13 23:13:00
難得看到自己懂的XDDDD
作者: makohasa (短短)   2017-12-13 23:17:00
聰明板
作者: duninafan (橄欖種子)   2017-12-13 23:28:00
哈哈 推專業~
作者: xxpin (xxpin)   2017-12-13 23:40:00
太聰明了
作者: papple23g (逆道者)   2017-12-13 23:40:00
作者: imjeffreylee (昌)   2017-12-13 23:48:00
看得懂給推文組別再要懶人包了 再懶的懶人包你也看不懂
作者: aaronchuu (阿褚)   2017-12-14 00:01:00
看得懂推爆
作者: greecewoods (yo 嗨森)   2017-12-14 00:11:00
文組頭很痛(舉手)
作者: pikachu107 (YUI)   2017-12-14 00:58:00
抱歉走錯版
作者: icexfox (東玉景)   2017-12-14 01:00:00
沒錯,跟我想的差不多
作者: wulearn3310 (吳)   2017-12-14 01:16:00
推推
作者: dapwo241 (Raccoons)   2017-12-14 01:17:00
文組像在看當天書
作者: fattygirl (你就是我的信仰 死肥)   2017-12-14 01:47:00
啊啊啊啊啊啊看不懂
作者: cmid05 (酷拉皮卡)   2017-12-14 01:59:00
XD
作者: a092197z (叭噗)   2017-12-14 02:17:00
推專業!
作者: LCA710 (LCA)   2017-12-14 02:22:00
看不懂拉
作者: SkySwimmer (((│)))   2017-12-14 02:31:00
錯版了啦XDD
作者: staynero8007 (staynero)   2017-12-14 02:40:00
你太聰明惹
作者: tzTillie (tz)   2017-12-14 03:53:00
太聰明了啊!解釋到連笨版常客都看懂了啊!
作者: Pictor (Pictor)   2017-12-14 04:46:00
專業推
作者: howardhope (紅蟳女孩~等等我)   2017-12-14 05:39:00
我也是這樣覺得
作者: zoe1000737   2017-12-14 07:07:00
QQ看不懂
作者: sds0331 (雅璱莎)   2017-12-14 08:00:00
原來如此
作者: dododoremi (dododo~~~)   2017-12-14 09:11:00
聰明板
作者: pepro (peproisgood)   2017-12-14 09:17:00
第一次知道chrome有這麼奇怪的設定
作者: bigbeat (天氣熱)   2017-12-14 09:18:00
原來4網頁設計師啊
作者: Mozar (沈默的樂師)   2017-12-14 09:50:00
有卦有推
作者: mumudi (酗音樂)   2017-12-14 09:59:00
這跟文組無關吧,做網頁設計的也會懂
作者: allenho (腸腸)   2017-12-14 10:02:00
滾,離開笨板
作者: ru486 (天空之城)   2017-12-14 10:06:00
看不懂照推~
作者: okijn5566 (RR)   2017-12-14 10:17:00
你就告訴我要填什麼就好了
作者: ErROrGG (餌箱)   2017-12-14 10:53:00
文組:供三小
作者: KDragon3615 (KDragon)   2017-12-14 10:56:00
看不懂!!
作者: Fraining   2017-12-14 11:11:00
趕快推 不能被發現自己是文組
作者: slimc0527 (Hasuku)   2017-12-14 11:45:00
請不要拉高笨版程度好嗎
作者: Survey (曾方元)   2017-12-14 11:54:00
這裡是笨版欸.........
作者: elvisleeee (李先生)   2017-12-14 12:05:00
認真什麼啦
作者: Imdream (夢想)   2017-12-14 12:28:00
原PO太聰明 害人去找聰明版了
作者: coco1104520 (coconl1104)   2017-12-14 12:42:00
天啊太聰明
作者: Nakazone (央人)   2017-12-14 13:06:00
你錯版了啦XDDDD
作者: timh3316 (yoyo)   2017-12-14 13:22:00
樓下看不懂怒噓
作者: qaz559 (yorke)   2017-12-14 13:29:00
天ㄚ
作者: vi000246 (Vi)   2017-12-14 15:33:00
用文字的驗證碼更好破解 說不定我判斷星星數就能知道是什麼數字了 連openCV都用不到
作者: hsp790604 (BEN)   2017-12-14 15:41:00
專業(怎麼辦,樓主在教什麼,我怎麼看不懂,趕快跟推,才不會被人笑不懂
作者: dandingduck (淡定の鴨子)   2017-12-14 16:15:00
作者: RiTaYin (夢語)   2017-12-14 16:23:00
您說的是中文嗎
作者: pong9001 (辣哥)   2017-12-14 16:39:00
推 聰明教學文
作者: im5jsu06 (7pupu)   2017-12-14 17:14:00
推專業
作者: gngn5566 (方方)   2017-12-14 18:21:00
請右轉聰明板
作者: areare38 (包子)   2017-12-14 18:29:00
需要文組懶人包
作者: jhongsian (呆)   2017-12-14 19:07:00
啃太專業推
作者: goldstorm (哦齁哦齁)   2017-12-14 19:27:00
還好看得懂 長知識了呢!
作者: YaCi98 (YaCi)   2017-12-15 02:50:00
錯版囉
作者: key1000 (GENPAOYO)   2017-12-15 11:50:00
連我這文組都看的懂惹
作者: evaal (AL)   2017-12-15 13:11:00
欺負文組給噓
作者: Ephraim (Ephraim)   2017-12-15 13:12:00
你走錯版了吧....
作者: rcak801 (阿常)   2017-12-15 14:09:00
但這個驗證碼對電腦判斷根本沒用 完全無法阻止惡意攻擊
作者: iflost (呆呆腰不腰埋薑由)   2017-12-16 07:58:00
推專業
作者: andy6001 (楓葉是白色的!!!)   2017-12-16 09:25:00
這不是笨版,漲知識了
作者: bill91305 (宇風)   2017-12-16 14:01:00
長知識了,左轉聰明版
作者: aic8382 (白日夢Evanesce)   2017-12-17 03:40:00
笨點是原PO很搞剛的繞了一大圈 發現有更簡單的解法阿
作者: rj486 (rj486)   2017-12-17 14:49:00
看完你這篇我頭都痛了.
作者: lazybonebone (小柏)   2017-12-17 16:24:00
專業推
作者: sorryfly   2017-12-18 18:58:00
太聰明了
作者: ForgerEames (造.夢)   2017-12-18 19:50:00
推看笨版長知識XD
作者: aacj2642 (湮影)   2017-12-19 10:22:00
好猛
作者: magicsiren ( 四季)   2017-12-19 17:57:00
聰明推,感謝教學XD
作者: JANUARZ (Z醫生)   2017-12-21 16:43:00

Links booklink

Contact Us: admin [ a t ] ucptt.com