跨瀏覽器開發(fā)經(jīng)驗(yàn)總結(jié)（二） CSS ，書寫代碼的同時(shí)多考慮一些多瀏覽器的兼容性問(wèn)題。怎樣才能符合標(biāo)準(zhǔn)。
為頁(yè)面添加DOCTYPE
由于不同瀏覽器對(duì)標(biāo)簽,樣式表的解釋不盡相同,所以需要為html文件定義一個(gè)標(biāo)準(zhǔn)的文檔類型,使不同瀏覽器盡量按照一個(gè)統(tǒng)一的html標(biāo)準(zhǔn)來(lái)解析渲染頁(yè)面。
!DOCTYPE 聲明指定文檔遵從的 DTD，如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
標(biāo)準(zhǔn)HTML標(biāo)簽的正確使用
盡量使用div+css布局,不用table做布局。
使用table做布局容易造成代碼冗余，相對(duì)<div></div>編寫來(lái)說(shuō)，代碼繁多。并且，table需要將元素都下載后進(jìn)行顯示，相應(yīng)的網(wǎng)頁(yè)打開速度也較慢。
應(yīng)該使用標(biāo)準(zhǔn)化的頁(yè)面結(jié)構(gòu)：DIV+CSS。這種布局方式代碼簡(jiǎn)潔，頁(yè)面瀏覽速度較快，頁(yè)面布局靈活，改版時(shí)只需改CSS樣式即可實(shí)現(xiàn)頁(yè)面重新布局，而不用改動(dòng)程序，從而降低了網(wǎng)站改版的成本。
注意標(biāo)簽的閉合關(guān)系,尤其是在form標(biāo)簽中嵌套div等其他標(biāo)簽時(shí)。
有的時(shí)候頁(yè)面上會(huì)出現(xiàn)多余的空白，即使重新設(shè)置了margin也無(wú)法避免，這個(gè)時(shí)候有可能是頁(yè)面元素標(biāo)簽閉合出現(xiàn)了不配對(duì)的情況，如：
<div class=”outer”>
<form name=”testForm”>
<div class=”inner”>
<input name=”title” type=”text” />
</form>
</div>
</div>
定義table時(shí)使用tbody元素，以保證包括IE在內(nèi)的所有瀏覽器可正確使用
即使table沒有顯示定義tbody元素,瀏覽器也會(huì)認(rèn)為tr節(jié)點(diǎn)的父節(jié)點(diǎn)是一個(gè)自動(dòng)添加的默認(rèn)tbody節(jié)點(diǎn).為了避免使用javascript操縱tr節(jié)點(diǎn)時(shí)可能產(chǎn)生的誤會(huì), 還是手動(dòng)添加一個(gè)比較好，如：
<table id=”myTable”>
<tbody id=”myTableBody”>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
注意標(biāo)簽及屬性的大小寫
有的時(shí)候，有些綁定在元素上的事件在IE瀏覽器下響應(yīng)，在safari或其他瀏覽器下卻不響應(yīng)。這時(shí)候需要檢查事件綁定方式的正確性，高級(jí)事件的綁定需要區(qū)別IE和其他瀏覽器寫兩套javascript，而簡(jiǎn)單事件模型需要注意一下綁定事件名的大小寫。如：
<input type=”text” name=”keywordSearch” onFocus=”clearValue()” >
這里應(yīng)該用小寫的onfocus，并且顯示的添加標(biāo)簽閉合符號(hào)才是規(guī)范的寫法。
<input type=”text” name=”keywordSearch” onfocus=”clearValue()” />
注意標(biāo)簽的屬性值設(shè)置
<script>標(biāo)簽的language和type屬性
<script>標(biāo)簽的language屬性是用來(lái)定義腳本語(yǔ)言版本的，正確的賦值應(yīng)該形如<script>用來(lái)告訴瀏覽器（主要是IE）使用1.2版本的javascript語(yǔ)法來(lái)解釋；而type屬性才是用來(lái)定義腳本類型的，是w3c的標(biāo)準(zhǔn)屬性，并且使用小寫屬性才是符合標(biāo)準(zhǔn)的做法。如果不是特別情況下需要告訴瀏覽器按照較低版本的javascrip語(yǔ)言進(jìn)行解釋的話（目前大多數(shù)瀏覽器支持的javascript版本是1.5），一般不需要定義language屬性，但是type屬性是需要定義的。所以應(yīng)該把代碼中的
<SCRIPT Language="JavaScript">改為<script>
<a>標(biāo)簽的alt和title屬性
雖然alt和title這兩個(gè)屬性的值在IE下都會(huì)以tool tip的方式在鼠標(biāo)懸停時(shí)顯示，但是二者還是有區(qū)別的。alt是圖片沒有顯示出來(lái)的時(shí)候的替代顯示，而title才是鼠標(biāo)放到上面時(shí)的提示。
<input>標(biāo)簽的checked、readonly屬性
在早期版本的HTML中，并沒有強(qiáng)制規(guī)定所有的屬性都應(yīng)該賦值，在表示一個(gè)選中的復(fù)選框時(shí)，<input checked > 這樣的寫法是被認(rèn)可的。但是根據(jù)XHTML的標(biāo)準(zhǔn)，這樣的文法并不是一個(gè)嚴(yán)格的XML格式，應(yīng)該注意對(duì)屬性的賦值和標(biāo)簽的閉合，以順應(yīng)HTML標(biāo)準(zhǔn)發(fā)展的趨勢(shì)，寫成這樣：
<input checked="checked" />
<input readonly="readonly" />
<option>標(biāo)簽的select ed屬性
與上一條相同的理由，<select>選項(xiàng)中<option>標(biāo)簽的selected屬性也應(yīng)該賦值：
< option selected="selected" />
<img>標(biāo)簽的 align="absmiddle" 屬性
根據(jù)XHTML的標(biāo)準(zhǔn)，HTML標(biāo)簽應(yīng)該專注于內(nèi)容的表示，而不是樣式的控制，樣式應(yīng)該交給CSS調(diào)整。所以廢棄了一些舊的標(biāo)簽和屬性，比如<em>標(biāo)簽和<i>標(biāo)簽都會(huì)讓標(biāo)簽內(nèi)容中文字以斜體顯示，但是<i>標(biāo)簽這種單純以樣式命名的標(biāo)簽已經(jīng)屬于廢棄的標(biāo)準(zhǔn)了，取而代之的是表示emphasis（強(qiáng)調(diào)）含義的<em>標(biāo)簽。同理，<img>標(biāo)簽的和align="absmiddle" 屬性表示該圖片和相鄰文字垂直居中對(duì)齊，這也是表示樣式的屬性，應(yīng)該使用CSS而不是這個(gè)屬性來(lái)控制圖片的對(duì)齊樣式，避免兩處樣式控制的相互影響。
<iframe>標(biāo)簽的frameborder屬性
在使用iframe時(shí)，IE中或許只要設(shè)置border=“0”就可以不顯示iframe的邊框了，但是標(biāo)準(zhǔn)的控制frame窗口邊框的屬性是frameborder，應(yīng)該設(shè)置frameborder=“0”才能在IE之外的其他瀏覽器中同樣隱藏frame的邊框：
<iframe frameborder="0" />
<table>標(biāo)簽的cellpadding屬性
這個(gè)屬性同<img>標(biāo)簽的 align屬性一樣，也是一個(gè)僭越了HTML自身表示內(nèi)容的職責(zé)而控制樣式的一個(gè)屬性，它規(guī)定的是單元之間的空間。從實(shí)用角度出發(fā)，最好不要規(guī)定 cellpadding，而是使用 CSS 來(lái)控制單元格的內(nèi)邊距。
<td>標(biāo)簽的nowrap屬性
nowrap是表示內(nèi)容不自動(dòng)換行的屬性，但是同上面的屬性一樣，這是一個(gè)控制樣式的屬性。在 HTML 4.01 中，<td>標(biāo)簽的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被贊成使用的。在 XHTML 1.0 Strict DTD 中，<td>標(biāo)簽的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試