最近為 XOOPS 正體中文站討論區加裝票選模組並在測試站下用不同瀏覽器進行檢視,以測試嵌入於帖子中的票選內容是否正常,郤發現帖子上的標題不見了,由此便得知 Chrome 一直存在的 CSS bug。
Chrome 的問題很怪異,即使跟 Chrome 同一核心引擎的 Safari ,也不會出現如 Chrome 的 CSS bug,加上只在特定的文字如「關」字並配合 CSS 中的 text-shadow,便會發揮作用,把標題文字「關」起來不讓看得見,只在骨子底下的原始碼裡顯露出來。
如果閣下有裝 Chrome 瀏覽器的話可以點這裡開啟小視窗(Chrome下請自行用滑鼠將小視窗拉高),將下面代碼全複製進去測試看看,然後換別的瀏覽器再試。
如果您會 CSS 的話,只要去調一調上面代碼中的 text-shadow 屬性值,您會發現其中跟 opacity 相關的值就是關閉文字的啟動制,只要將數值設到 1 或以上,保證讓您在 Chrome 下看不見文字。
Chrome 的問題很怪異,即使跟 Chrome 同一核心引擎的 Safari ,也不會出現如 Chrome 的 CSS bug,加上只在特定的文字如「關」字並配合 CSS 中的 text-shadow,便會發揮作用,把標題文字「關」起來不讓看得見,只在骨子底下的原始碼裡顯露出來。
如果閣下有裝 Chrome 瀏覽器的話可以點這裡開啟小視窗(Chrome下請自行用滑鼠將小視窗拉高),將下面代碼全複製進去測試看看,然後換別的瀏覽器再試。
![]()
![]()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Chrome 的 CSS bug</title> <style type="text/css"> /*<![CDATA[*/ body {text-align:center;} h2 { background:#fc0; border:1px dashed #f60; margin:20px 100px; font:2em/2.2em bold; color:#006; text-shadow:0 2px 1px #fff; } p{font-size:1.5em} /*]]>*/ </style> </head> <body> <h2>關掉不讓您看見</h2> <p>看得見上面背景色裡的文字嗎?</p> </body> </html>
如果您會 CSS 的話,只要去調一調上面代碼中的 text-shadow 屬性值,您會發現其中跟 opacity 相關的值就是關閉文字的啟動制,只要將數值設到 1 或以上,保證讓您在 Chrome 下看不見文字。