7. IE6下這兩個層中間怎麼有間隙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- .left { float:left; width:100px; height:100px; background:red } .right { width:100px; height:100px; background:orange } --> </style> aaaaaa aaaaaa
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
這個IE的3PX BUG也是經常出現的，解決的辦法是給.right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
8. list-style-image無法準確定位的問題
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- li { list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif"); } li a { position:relative; top:-5px; font:12px/25px 宋體; } --> </style> <ul> <li>web標準常見問題大全</li> <li>web標準常見問題大全</li> <li>web標準常見問題大全</li> <li>web標準常見問題大全</li> <li>web標準常見問題大全</li> </ul>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
這個list-style-image的定位問題也是經常有人問的，解決的辦法一般是用li的背景類比，這裡採用相對定位的方法也可以解決
9. LI中內容超過長度後以省略符號顯示的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> <ul> <li>web標準常見問題大全web標準常見問題大全</li> <li>web標準常見問題大全web標準常見問題大全</li> <li>web標準常見問題大全web標準常見問題大全</li> <li>web標準常見問題大全web標準常見問題大全</li> <li>web標準常見問題大全web標準常見問題大全</li> </ul>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
此方法適用與IE與OP瀏覽器
