鏈接用圖片做背景，text-indent:-9999px; 隱藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠標點擊該鏈接時，虛線框卻會包住被縮進的文字，結(jié)果顯示為虛線框 N 長。
　　因為平時是用overflow:hidden; 屬性的，所以一直也沒有注意到這個問題的存在，但當(dāng)你需要使用 JS 來實現(xiàn)某種交互時，強烈建議不要使用 overflow:hidden; 屬性，因為會給你帶來很多意想不到的麻煩。
　　虛線框，其實就是 CSS 中的 outline 屬性，這也說明 IE 和 Firefox 對于 outline 和 border 的解析范圍并不一致：IE 認為虛線框就是border的邊緣，而 Firefox 則認為虛線框應(yīng)該是文字范圍。
　　那 W3C 中是如何定義 outline 的呢？
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS2 outlines differ from borders in the following ways:
1. Outlines do not take up space.
2. Outlines may be non-rectangular.
　　把虛線框去掉了a:focus { outline:0 } ，畢竟這個問題只存在 Firefox 中。

最新評論