CSS常見問題的解決方案

CSS問題和經驗

Bugs和解決方案

1. 如何在IE6及更早瀏覽器中定義小高度的容器？
2. 如何解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG？
3. 如何在IE6及更早瀏覽器下模擬min-height效果？
4. 如何解決按鈕在IE7及更早瀏覽器下隨着value增多兩邊留白也隨着增加的問題？
5. 如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時，li之間產生的空白間隙的BUG？
6. 如何解決IE6及更早瀏覽器下的3像素BUG？
7. 如何解決IE6下的文本溢出BUG（江湖匪號：“諜影重重”或“一隻豬的故事”）？
8. 如何解決IE6使用濾鏡PNG圖片透明後，容器內鏈接失效的問題？
9. 如何解決IE6無法識別僞對象:first-letter/:first-line的問題？
10. 如何解決IE8會忽略僞對象:first-letter/:first-line裏的!important規則的問題？
11. 如何解決IE6會忽略同一條樣式體內的!important規則的問題？
12. 如何解決IE6及更早瀏覽器下當li內部元素是定義了display:block的內聯元素時底部產生空白的問題？
13. 如何解決IE6及更早瀏覽器下未定義寬度的浮動或絕對定位元素會被內部設置了zoom:1的塊元素撐開的問題？
14. 如何解決IE7及更早瀏覽器下子元素相對定位時父元素overflow屬性的auto|hidden失效的問題？
15. 如何解決Chrome在應用transition時頁面閃動的問題？

技巧和經驗

1. 如何清除圖片下方出現幾像素的空白間隙？
2. 如何讓文本垂直對齊文本輸入框？
3. 如何讓單行文本在容器內垂直居中？
4. 如何讓超鏈接訪問後和訪問前的顏色不同且訪問後仍保留hover和active效果？
5. 爲什麼Standard mode下IE無法設置滾動條的顏色？
6. 如何使文本溢出邊界不換行強制在一行內顯示？
7. 如何使文本溢出邊界顯示爲省略號？
8. 如何使連續的長字符串自動換行？
9. 如何清除浮動？
10. 如何定義鼠標指針的光標形狀爲手型併兼容所有瀏覽器？
11. 如何讓已知高度的容器在頁面中水平垂直居中？
12. 如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？
13. 如何設置span的寬度和高度（即如何設置內聯元素的寬高）？
14. 如何給一個元素定義多個不同的css規則？
15. 如何讓某個元素充滿整個頁面？
16. 如何讓某個元素距離窗口上右下左4邊各10像素？
17. 如何去掉超鏈接的虛線框？
18. 如何容器透明，內容不透明？
19. 如何讓整個頁面水平居中？
20. 爲什麼容器的背景色沒顯示出來？爲什麼容器無法自適應內容高度？
21. 如何做1像素細邊框的table？
22. 如何使頁面文本行距始終保持爲n倍字體大小的基調？
23. 標準模式Standard mode和怪異模式Quirks mode下的盒模型區別？
24. 以圖換字的幾種方法及優劣分析
25. 爲什麼2個相鄰div的margin只有1個生效？
26. 如何在文本框中禁用中文輸入法？
27. 如何解決列表中list-style-image不能精準定位的問題？
28. 如何解決僞對象:before和:after在input標籤上的怪異表現的問題？
29. 如何解決僞對象:before和:after無法在Chrome,Safari,Opera上定義過渡和動畫的問題？

其它技巧和經驗

1. 如何讓層在flash上顯示？
2. 如何使用標準的方法在頁面上插入flash？
3. 如何在點文字時也選中複選框或單選框？
4. IE下如何對Standard Mode與Quirks Mode進行切換？
5. 如何區別display:none與visibility:hidden？
6. 如何設置IE下的iframe背景透明？