16、未知尺寸的圖片圖如何水平垂直居中?
參閱:/article.asp?id=159
17、標準模式和怪異模式下的盒模型區別?
標準模式下:實際寬度 = width + padding + border
怪異模式下:實際寬度 = width - padding - border
18、如何解決IE下的3像素BUG?
參閱:/article.asp?id=68
19、如何做1像素細邊框的table?
方法1:設置table的border-collapse:collapse;
<style type="text/css">
table{border-collapse:collapse;border-color:#000;}
td{border-color:#000;}
</style>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>測試 </td>
<td>測試 </td>
</tr>
</table>
方法2:關鍵在於設置cellspacine="1",用間隙來作為邊框
<style type="text/css">
table{background:#000;}
tr{background:#fff;}
</style>
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<td>測試 </td>
<td>測試 </td>
</tr>
</table>
20、以圖換字的幾種方法及優劣分析
以圖換字,其實是為了保證頁面的可讀性,這樣既有利於搜索引擎,又有利於結構查看。由於這種方式被大多數人所認同,所以方法也越來越多:
方法1:使用text-indent的負值,將內容移出容器;
方法2:使用display:none,將內容隱藏;
方法3:使用padding將文字擠出容器之外,並將超出的部分hidden;
方法4:使用font設置超小字體,達到隱藏內容的目的。
方法1(非常不推薦)看起來蠻簡單,但其實有幾個不理想的地方,1是比較吃資源;2是在ie5下面會出現滯後背景無法顯示;3是內容為超鏈接時,長長的黑色虛框,讓妳抓狂。
方法2(不推薦)其實倒也不復雜,只是需要多添加壹個標簽,比較浪費;且display:none出現的幾率太多,對seo也是會有些許影響的。
方法3(推薦)Standard Model下要2層標簽才能搞定,不過相對方法1和2還是有優勢的,推薦壹下。
方法4(強烈推薦)只需要將字體設置為0,然後overflow:hidden;如font:0/0 arial;overflow:hidden;就同樣可以達到隱藏內容的目的,暫時還沒發現有什麽副作用,強烈推薦。
21、如何容器透明,內容不透明?
假設在標準模式下有如下結構:
<div class="outer">
<p class="inner">我不要透明 </p>
</div>
IE only的方法:在父容器outer被設置為透明後,只需要將子容器inner設置為position:relative; 如果需要兼容其它瀏覽器,則以上的方法不適用,且結構也需改為:
<div class="outer"> </div>
<div class="inner">我不要透明 </div>
然後使用position + z-index搞定位置
22、如何去掉鏈接的虛線框?
IE下: <a href="#" onfocus="this.blur();"...>
FF下:a{outline:none;}
23、如何使得頁面字體行距始終保持n倍字體大小為基調?
在body內設置line-height:n即可,註,不可以為它加上單位
原因可參閱:/article.asp?id=195
24、如何使用標準的方法插入flash?
<div class="fla-show">
<object type="application/x-shockwave-flash" data="*.swf" width="*" height="*">
<param name="movie" value="*.swf" />
<img src="*.jpg" alt="用於不支持flash或屏蔽flash時顯示" />
</object>
</div>
25、Standard Model如何讓容器可以height:100%?
設置html,body{height:100%;margin:0;}
26、如何使得表格的寬度固定?
設置table為table-layout:fixed;這時表格將使用固定布局算法,多出的內容將不影響表格的寬度
27、如何讓min-height兼容ie6?
.min-height{min-height:100px;_height:100px;}
<div class="min-height">我是兼容的min-height </div>
28、如何讓鼠標變成手型且兼容所有現代瀏覽器?
cursor:pointer
29、如何實現ie6下的position:fixed?
參閱:/article.asp?id=188
30、IE下如何對Standard Mode與Quirks Mode進行切換?
IE6以下的瀏覽器不用觸發,直接以Quirks Mode呈現頁面。
IE6和IE7都可以觸發的(在XHTML 的DTD申明前加上HTML註釋):
<!--Let ie6 and ie7 into quirks mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題,加了背景色依然無效。接著測試中…
6. IE6下為什麽圖片下方有空隙產生
解決這個BUG的方法也有很多,可以是改變html的排版,或者定義img 為display:block
或者定義vertical-align屬性值為vertical-align:top | bottom |middle |text-bottom
還可以設置父容器的字體大小為零,font-size:0
7. IE6下這兩個層中間怎麽有間隙
這個IE的3PX BUG也是經常出現的,解決的辦法是給.right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
8. list-style-image無法準確定位的問題
這個list-style-image的定位問題也是經常有人問的,解決的辦法壹般是用li的背景模擬,這裏采用相對定位的方法也可以解決
9. LI中內容超過長度後以省略號顯示的方法
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}