有"http://www.w3.org/TR/html4/loose.dtd"聲明瀏覽器就會按這個聲明的方式

去解釋css樣式的顯示效果,反之則按原始(各瀏覽器廠家的意願)方式顯示。

 1、如何定義高度很小的容器?

在IE6下無法定義小高度的容器,是因為有一個默認的行高。
列舉2種解決方案:overflow:hidden | line-height:0

2、圖片下方出現幾像素的空白間隙?

這個也有很多種解決方案,如將img定義為display:block,或定義父容器為font-size:0
個人更推薦使用vertical-align的方式,它的值可以是text-top | text-bottom | middle
等。

3、IE6雙倍margin的BUG?

display:inline

4、文本垂直方向對齊文本輸入框?

設置input為vertical-align:middle,textarea也是如此

5、為什麼在web標準下ie無法設置滾動條的顏色?

將設置滾動條顏色的樣式定義到html標籤選擇符上即可將設置滾動顏色的樣式定義到html標籤選擇符上即可

6、如何讓層在flash顯示?

不可以,除了少數幾個級別很高的家伙除外。
但可以將flash設置為透明,這時層就會透過flash顯示,近似於覆蓋在flash之上了,如:
<param name="mode" value="transparent" />

7、如何使得文字不換行?

定義包含文字的容器為:width:xxx;white-space:nowrap;

8、ie中如何讓超出寬度的文字顯示為省略號?

定義容器為:overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9、如何在點文字時也選中checkbox?

<input id="test" type="checkbox" value="on" /> <label for="test">測試</label>

10、一個div為margin-bottom:10px,一個div為margin-top:5px,為什麼2個div之間的間距是10px而不是15px?

這種情況瀏覽器會自動進行margin重疊,只是顯示較大的margin值
解決方案:只設置其中一個div的margin為15px

11、如何解決ie下當li中出現2個或以上的浮動時,li之間產生的空白間隙?

設置li的vertical-align,值可以為top | text-top | middle | bottom | text-bottom

12、如何使得英文單詞不發生詞內斷行?

word-wrap:break-word;

13、為什麼被訪問過的鏈接顏色沒有變化?

定義鏈接樣式時,需要按照:link,:visited,:hover,:active這樣的順序,可以使用LoVe HAte(喜歡討厭)來記憶

14、單行文本如何垂直居中?

height:xxx;line-height:xxx; 高和行高相同即可

15、已知高度的容器如何在頁面中水平垂居中?

參閱:http://blog.doyoe.com/article.asp?id=74

16、未知尺寸的圖片圖如何水平垂直居中?

參閱:http://blog.doyoe.com/article.asp?id=159

17、標準模式和怪異模式下的盒模型區別?

標準模式下:實際寬度 = width + padding + border
怪異模式下:實際寬度 = width - padding - border

18、如何解決IE下的3像素BUG?

參閱:http://blog.doyoe.com/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>
<p>我不要透明</p>
</div>

IE only的方法:在父容器outer被設置為透明後,只需要將字容器inner設置為position:relative;
如果需要兼容其他瀏覽器,則以上方法不適用,且結構也需改為:

<div> </div>
<div>我不要透明</div>

然後使用position + z-index搞定位置

22、如何去掉鏈接的虛線框?

IE下: <a href="#" onfocus="this.blur();"...>
FF下:a{outline:none;}

23、如何使得頁面字體行距始終保持n倍字體小為基調?

在body內設置line-height:n即可,註:不可以為寵加上單位
原因可參閱:http://blog.doyoe.com/article.asp?id=195

24、如何使用標準的方法插入flash?

<div>
<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>我是兼容的min-height </div>

28、如何讓鼠標變成手型且兼容所有現代瀏覽器?

cursor:pointer

29、如何實現ie6下的position:fixed?

參閱:http://blog.doyoe.com/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"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE6的觸發(在XHTML的DTD申明前加上XML申明):
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

當沒有使用DTD聲明或者使用HTML4以下(不包括HTML4)的DTD聲明時,基本所有的瀏覽器都是使用Quirks Mode呈現。

31、如何給一個元素定義多個不同的css規則?

<style type="text/css">
.a{color:#f00;}
.b{background:#eee;}
</style>

<div>测试 </div>

如上例,該元素同時擁有a和b定義的樣式規則。
多個規則之間使用空格分開,並且只有class能同時使用多個規則,id不可以

32、如何區別display:none與visibility:hidden?

相同的是display:none與visibility:hidden都可以用隱藏某個元素:
不同的是display:none在隱藏元素的時候,將其占位空間也去掉;而visibility:hidden只是隱藏了內容而以,其占空間仍然何留

1.超連結訪問過後hover樣式就不出現的問題

被點擊訪問過的超連結樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A

2.FF下如何連續長字段自動換行

眾所周知IE中直接使用word-wrap:break-word 就可以了,這裡FF中我們使用JS插入的方法來解決

3.FF下為什麼父容器的高度不能自動適應,為什麼這個P撐不開DIV呢?

解決的辦法是在div 與 p 之間插入<div style=”clear:both”></div>清除掉這個p的浮動

參閱:http://blog.csdn.net/ahuiok/article/details/2065028

 

什麼?你在IE下也碰到過這類問題

1. IE6的雙倍邊距BUG

浮動後本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline

2. IE6下絕對定位的容器內文本無法正常選擇的問題

上面的問題在IE6、7中存在,解決問題的辦法是讓IE進入到quirks mode。關於quirks mode的相關知識
請參考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題,加了背景色依然無效。

3. IE6下為什麼圖片下方有空隙產生

解決這個BUG的方法也有很多,可以是改變html的排版,或者定義img 為display:block
或者定義vertical-align屬性值為vertical-align:top | bottom |middle |text-bottom
還可以設置父容器的字體大小為零,font-size:0

4. IE6下這兩層中間怎麼有間隙

這個IE的3PX BUG也是經常出現的,解決的辦法是給.right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;

5. list-style-image無法準確定位的問題

這個list-style-image的定位問題也是有人問的,解決的辦法一般是用li的背景模似,這里採用相對定位的方法也可以解決

6. LI中內容超過長度後以省略號顯示的方法

li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

gcchiou 發表在 痞客邦 PIXNET 留言(0) 人氣()