睡蓮‧池水間

Guest
2012-May-24  
0 位會員和 13 位訪客在線上

文章 :: 語言集

Chrome 的 CSS bug

睡蓮
 
池水間 
  最近為 XOOPS 正體中文站討論區加裝票選模組並在測試站下用不同瀏覽器進行檢視,以測試嵌入於帖子中的票選內容是否正常,郤發現帖子上的標題不見了,由此便得知 Chrome 一直存在的 CSS bug。

  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 下看不見文字。


    «« CSS3 Media Queries 詳解 CSS Specificity 在 IE 下的錯誤規則 »»    

引用

  • 文章地址: http://waterlily-lsl.com/modules/article/view.article.php/c2/253
  • 引用地址: http://waterlily-lsl.com/modules/article/trackback.php/253

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 

最 新 發 表 及 資 訊 區

此為池水間 banner ,需要安裝 Adobe Flash Player 才能觀看內容。

最新留言

最新留言:2012-Jan-6 11:13am
留言編號:76
留言者: wuji888
網主回覆:
總留言數: 71

前往萍踪留影

造訪統計

今天:54
昨天:330
本週:2218
本月:12234
總計:433471
平均:311

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
除另有註明外,本站內容均採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 授權條款授權
登 入