Web前端開發手冊

時間 2019-11-13

標籤 web 前端開發手冊欄目 HTML 简体版

原文原文鏈接

1、規範目的

1.1 概述 ..................................................................................................................................... 1javascript

2、文件規範

2.1 文件命名規則.........................................................................................................................1css

2.2 文件存放位置..........................................................................................................................2html

2.3 css 書寫規範..........................................................................................................................3前端

2.4 html書寫規範.........................................................................................................................7java

2.5 JavaScript書寫規範.............................................................................................................11css3

2.6 圖片規範...................................................................................................................................12web

2.7 註釋規範...................................................................................................................................13
2.8 css 瀏覽器兼容.......................................................................................................................13瀏覽器

1、規範目的緩存

1.1 概述服務器

爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發. 本文檔若有不對或者不合適的地方請及時提出, 經討論決定後能夠更改此文檔.

2、文件規範

2.1 文件命名規則

文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你本身和工做組的每個成員可以方便的理解每個文件的意義，二是當咱們在文件夾中使用「按名稱排例」的命令時，同一種大類的文件可以排列在一塊兒，以便咱們查找、修改、替換、計算負載量等等操做。

a. HTML的命名原則
引文件統一使用index.htm index.html index.asp文件名（小寫）
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞爲名稱。例如：
關於咱們 \ aboutus
信息反饋 \ feedback
產品 \ product

若是欄目名稱多而複雜並很差以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母表示；
每個目錄中應該包含一個缺省的html 文件，文件名統一用index.htm index.html index.asp；

b. 圖片的命名原則

圖片的名稱分爲頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質
例如：廣告、標誌、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
標誌性的圖片取名爲： logo
在頁面上位置不固定而且帶有連接的小圖片咱們取名爲 button
在頁面上某一個位置連續出現，性質相同的連接欄目的圖片咱們取名： menu
裝飾用的照片咱們取名： pic
不帶連接表示標題的圖片咱們取名： title
範例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg
鼠標感應效果圖片命名規範爲"圖片名+_+on/off"。
例如：menu1_on.gif menu1_off.gif

c. javascript的命名原則
例如：廣告條的javascript文件名爲 ad.js 彈出窗口的javascript文件名爲 pop.js

d. 動態語言文件命名原則
以性質_描述，描述能夠有多個單詞，用「_」隔開，性質通常是該頁面得概要。
範例：register_form.asp register_post.asp topic_lock.asp

2.2 文件存放位置規範

_Root
	cn	存放中文HTML文件
	en	存放英文HTML文件
	flash	存放Flash文件
	images	存放圖片文件
	imagestudio	存放PSD源文件
	flashstudio	存放flash源文件
	inc	存放include文件
	library	存放DW庫文件
	media	存放多媒體文件
	project	存放工程項目資料
	temp	存放客戶原始資料
	js	存放JavaScript腳本
	css	存放CSS文件

2.3 CSS 書寫規範

基本原則：

CSS樣式可細分爲3類：自定義樣式、從新定義HTML樣式、連接狀態樣式。

1. 樣式爲設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。樣式名「.」+「相應樣式效果描述的單詞或縮寫」例：「 .shadow 」
文字樣式樣式名「.no」+「字號」+「行距」+「顏色縮寫」例：「 .no12 」、「 .no12-24 」

2. 義HTML樣式爲設計師從新定義已有的HTML標籤樣式，影響所有的被設定標籤樣式，用於統一網頁中某一標籤的樣式定義。樣式名「HTML標籤」例：hr { border: 1px dotted #333333 }

3. 態樣式爲設計師對連接不一樣狀態設定特殊樣式，影響被使用本樣式區域中的連接。
該樣式寫法有2種： a.nav:link nav.a:link 第一種只能修飾<a>標籤中；第二種能夠修飾全部包含有<a>標籤的其餘標籤。

頁面內的樣式加載必須用連接方式<link rel="stylesheet" type="text/css" href="style/style.css">

注意細則：

1. 協做開發及分工: i會根據各個模塊, 同時根據頁面類似程序, 事先寫好大致框架文件, 分配給前端人員實現內部結構&表現&行爲; 共用css文件base.css由i書寫, 協做開發過程當中, 每一個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;

2. class與id的使用: id是惟一的並是父級的, class是能夠重複的並是子級的, 因此id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由我分發框架文件時命名的, 爲JavaScript預留鉤子的除外;

3. 爲JavaScript預留鉤子的命名, 請以 js_ 起始, 好比: js_hide, js_show;

4. class與id命名: 大的框架命名好比header/footer/wrapper/left/right之類的在2中由i統一命名.其餘樣式名稱由小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘可能使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.

5. 規避class與id命名(此條重要, 如有不明白請及時與i溝通):

a, 經過從屬寫法規避, 示例見d;

b, 取父級元素id/class命名部分命名, 示例見d;

c, 重複使用率高的命名, 請以本身代號加下劃線起始, 好比i_clear;

d, a,b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼<div id="mainnav"></div>中加入新的div元素,

按a命名法則: <div id="mainnav"><div class="firstnav">...</div></div>,

樣式寫法: #mainnav .firstnav{.......}

按b命名法則: <div id="mainnav"><div class="main_firstnav">...</div></div>,
樣式寫法: .main_firstnav{.......}

6. css屬性書寫順序, 建議遵循佈局定位屬性-->自身屬性-->文本屬性-->其餘屬性. 此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 屬性列舉: 佈局定位屬性主要包括: margin、padding、float（包括clear）、position（相應的 top,right,bottom,left）、display、visibility、overflow等；自身屬性主要包括: width & height & background & border; 文本屬性主要包括：font、color、text-align、text-decoration、text-indent等；其餘屬性包括: list-style(列表樣式)、vertical-vlign、cursor、z-index(層疊順序) 、zoom等.我所列出的這些屬性只是最經常使用到的, 並不表明所有;

7. 書寫代碼前, 考慮並提升樣式重複使用率;

8. 充分利用html自身屬性及樣式繼承原理減小代碼量, 好比:

<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>

定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}

便可實現日期居右顯示

9. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以免編碼錯誤時亂碼;

10. 背景圖片請儘量使用sprite技術, 減少http請求, 考慮到多人協做開發, sprite按模塊製做;

11. 使用table標籤時(儘可能避免使用table標籤), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現, 應儘量的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我會初始化表格樣式)

12. 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8;

13. 用png圖片作圖片時, 要求圖片格式爲png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請爲ie6單獨定義背景:

background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

14. 避免兼容性屬性的使用, 好比text-shadow || css3的相關屬性;

15. 減小使用影響性能的屬性, 好比position:absolute || float ;

16. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;

17. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化i會統一處理;

命名規則：

頭：header

內容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制總體佈局寬度：wrapper

左右中：left right center

登陸條：loginbar

標誌：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情連接：friendlink

頁腳：footer

版權：copyright

滾動：scroll

內容：content

標籤頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標題：title

加入：joinus

指南：guild

服務：service

註冊：regsiter

狀態：status

投票：vote

合做夥伴：partner

(二)註釋的寫法:

/* Footer */

內容區

/* End Footer */

(三)id的命名:

(1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制總體佈局寬度：wrapper

左右中：left right center

(2)導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

標題: title

摘要: summary

(3)功能

標誌：logo

廣告：banner

登錄：login

登陸條：loginbar

註冊：regsiter

搜索：search

功能區：shop

標題：title

加入：joinus

狀態：status

按鈕：btn

滾動：scroll

標籤頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

註釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合做夥伴：partner

友情連接：link

版權：copyright\

基本樣式：

/* CSS Document */

body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}

table,td,tr,th{font-size:12px;}

li{list-style-type:none;}

img{vertical-align:top;border:0;}

ol,ul {list-style:none;}

h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}

address,cite,code,em,th {font-weight:normal; font-style:normal;}

.fB{font-weight:bold;}

.f12px{font-size:12px;}

.f14px{font-size:14px;}

.left{float:left;}

.right{float:right;}

a {color:#2b2b2b; text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {color:#ba2636;text-decoration:underline;}

a:active {color:#ba2636;}

重定義的最早，僞類其次，自定義最後，便於本身和他人閱讀！

不一樣瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt通常使用中文宋體的9pt 和11pt，px通常使用中文宋體12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt 和14.7px 的字號比較合適。中英文混排時，咱們儘量的將英文和數字定義爲verdana 和arial 兩種字體。

2.4 html 書寫規範

1. 網頁製做細節 ---- head區代碼規範

head區是指HTML代碼的<head>和</head>之間的內容。

必須加入的標籤

a) 公司版權註釋

b) 網頁顯示字符集

簡體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

繁體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

英語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

c) 網頁製做者信息 <META name="author" content="webmaster@maketown.com">

d) 網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

e) 搜索關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

f) 網頁的css規範 <LINK href="../css/style.css" rel="stylesheet" type="text/css">

g) 網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>

能夠選擇加入的標籤

a) 設定網頁的到期時間。一旦網頁過時，必須到服務器上從新調閱。

b) 禁止瀏覽器從本地機的緩存中調閱頁面內容。

c) 用來防止別人在框架裏調用你的頁面。

d) 自動跳轉。

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com"> 5指時間停留5秒

e) 網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。

CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。

f) 收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">

g) 全部的javascript的調用盡可能採起外部調用.

h) 附<body>標籤：

<body>標籤不屬於head區，這裏強調一下，爲了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">

2.          網頁製做細節 ---- 字體
1. 在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。

2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。通常使用中文宋體的9pt 和11pt 或12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt 和14.7px 的字號比較合適。

3. 爲了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請儘可能不要使用<br> 來人工干預分段。

4.不一樣語種的文字之間應該有一個半角空格，但避頭的符號以前和避尾的符號以後除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。

5. 請不要在網頁中連續出現多於一個的   也儘可能少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該儘可能使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。

6. 行距建議用百分比來定義，經常使用的兩個行距的值是line-height:120%/150%.

7. 排版中咱們常常會遇到須要進行首行縮進的處理，不要使用   或者全角空格來達到效果，規範的作法是在樣式表中定義 p { text-indent: 2em; } 而後給每一段加上 <p> 標記，注意，通常狀況下，請不要省略 </p> 結束標記。

3. 網頁製做細節 ---- 連接
1. 網站中的連接路徑所有采用相對路徑，通常連接到某一目錄下的缺省文件的連接路徑沒必要寫全名，如咱們沒必要這樣：<a href=」aboutus/index.htm」> 而應該這樣：<a href=」aboutus/」>，全部內頁指向首頁的連接寫成<a href=」/」>

2. 在瀏覽器裏，當咱們點擊空連接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，咱們用代碼「javascript:void(null)」代替原來的「#」標記

4. 網頁製做細節 ---- 表格
1px表格 style="border-collapse: collapse"
實例以下：
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
設置亮、暗邊框顏色
表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性能夠對錶格樣式設置。
<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">

在寫 <table> 互相嵌套時，嚴格按照的規範，對於單獨的一個<table>來講，<table><tr>對齊，<td> 縮進兩個半角空格，<td> 中若是還有嵌套的表格，<table>也縮進兩個半角空格，若是<td>中沒有任何嵌套的表格，</td> 結束標記應該與 <td> 處於同一行，不要換行，
如咱們注意在源代碼中不該有這樣的代碼：
<td><img src=」../images/sample.gif」>
</td>
而應該是這樣的：
<td><img src=」../images/sample.gif」></td>
這是由於瀏覽器認爲換行至關於一個半角空格，以上不規範的寫法至關於無心中增長一個半角空格，若是確實有必要增長一個半角空格，也應該這樣寫：
<td><img src=」../images/sample.gif」> </td>

一個網頁要儘可能避免用整個一張大表格，全部的內容都嵌套在這個大表格以內，由於瀏覽器在解釋頁面的元素時，是以表格爲單位逐一顯示，若是一張網頁是嵌套在一個大表格以內，那麼極可能形成的後果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，而後全部的網頁內容同時出現。若是必須這樣作，請使用 <tbody>標記，以便可以使這個大表格分塊顯示

5. 網頁製做細節 ---- 下載速度
首頁Flash 網頁大小應限定在 200K 如下，儘量的使用矢量圖形和Action來減少動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，儘量的使用背景顏色替換大塊同色圖片。

6. 網頁製做細節 ---- include
asp標準寫法 
jsp 標準寫法 <%@ include file="../inc/index_top..jsp" %>

7. 網頁製做細節 ---- Alt和Title
都是提示性語言標籤，請注意它們之間的區別。

在咱們瀏覽網頁時，當鼠標停留在圖片對象或文字連接上時，在鼠標的右下角有時會出現一個提示信息框。對目標進行必定的註釋說明。在一些場合，它的做用是很重要的。

alt 用來給圖片來提示的。Title用來給連接文字或普通文字提示的。

用法以下：

8. 網頁製做細節 ---- 緩存

網頁不會被緩存

HTM網頁

ASP網頁

Response.Expires = -1

Response.ExpiresAbsolute = Now() - 1

Response.cachecontrol = "no-cache"

9. 網頁製做細節 ---- 瀏覽器兼容性
建立站點時，應該明白訪問者可能使用各類 Web 瀏覽器。在已知的其餘設計限制下，儘量將站點設計爲具備最大的瀏覽器兼容性。
目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即便您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶，但您應明確並非每一個人都在使用這兩種瀏覽器的最新版本。
您的站點越複雜（在佈局、動畫、多媒體內容和交互方面），跨瀏覽器兼容的可能性就越小。例如，並不是全部的瀏覽器均可以運行JavaScript。不使用特殊字符的純文本頁面或許可以在任何瀏覽器中正確顯示，但比起有效地使用圖形、佈局和交互的頁面，這樣的頁面在美感上可能要差得多。因此，應儘可能在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
全部的HTML 標籤的屬性都要用單引號或者雙引號括起，即咱們應該寫 <a href=」url」> 而不是 <a href=url>.

10. 圖片處理細節 ---- banner
全尺寸banner爲468X60px，半尺寸banner爲234X60px，小banner爲88X31px。
另外120X90，120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。
廣泛的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
次級頁的pip尺寸360X300，336X280
遊標:100X100或120X120

11. 圖片處理細節 ---- LOGO的國際標準規範
爲了便於INTERNET上信息的傳播，一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO，目前有三種規格：
88*31 這是互聯網上最廣泛的LOGO規格。
120*60 這種規格用於通常大小的LOGO。
120*90 這種規格用於大型LOGO。

12. 圖片處理細節 ---- 頁面修飾圖片處理
圖片通過優化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；製做精美，細節處理得當。

2.5 JavaScript書寫規範

1. 書寫過程當中, 每行代碼結束必須有分號; 原則上全部功能均根據XXX項目需求原生開發, 以免網上down下來的代碼形成的代碼污染(沉冗代碼 || 與現有代碼衝突 || ...);

2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其餘人員討論決定;

3. 變量命名: 駝峯式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符爲'_', 其餘與原生JavaScript 規則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.

4. 類命名: 首字母大寫, 駝峯式命名. 如 ITaoLun;

5. 函數命名: 首字母小寫駝峯式命名. 如iTaoLun();

6. 命名語義化, 儘量利用英文單詞或其縮寫;

7. 儘可能避免使用存在兼容性及消耗資源的方法或屬性, 好比eval() & innerText;

8. 後期優化中, JavaScript非註釋類中文字符須轉換成unicode編碼使用, 以免編碼錯誤時亂碼顯示;

9. 代碼結構明瞭, 加適量註釋. 提升函數重用率;

10. 注重與html分離, 減少reflow, 注重性能.

2.6 圖片規範

1. 全部頁面元素類圖片均放入img文件夾, 測試用圖片放於img/demoimg文件夾;

2. 圖片格式僅限於gif || png || jpg;

3. 命名所有用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；儘可能用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 好比ad_left01.gif || btn_submit.gif;

4. 在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間;

5. 儘可能避免使用半透明的png圖片(若使用, 請參考css規範相關說明);

6. 運用css sprite技術集中小的背景圖或圖標, 減少頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 並保存至img目錄下.

2.7 註釋規範

1. html註釋: 註釋格式 , '--'只能在註釋的始末位置,不可置入註釋文字區域;

2. css註釋: 註釋格式 /*這兒是註釋*/;

3. JavaScript註釋, 單行註釋使用'//這兒是單行註釋' ,多行註釋使用 /* 這兒有多行註釋 */;

2.8 瀏覽器兼容性 CSS hack

1、標識區別：
區別IE6,IE7,IE8,FF。
1. IE都能識別* ; 標準瀏覽器(如FF)不能識別*；

2. IE6能識別*，但不能識別 !important; IE6在樣式前面加_

3. IE7能識別*，也能識別!important;

4. IE8能識別\ 9 例如：background:red \9;

5. firefox不能識別*，但能識別!important;

1．IE6和firefox的區別：
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.

2. IE6和IE7的區別：
background:green !important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色

3. IE7和FF的區別：
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

4. FF，IE7，IE6的區別：
background:orange;
*background:green !important;
*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.

2、實踐建議

(1). 開發平臺的選擇

在 Firefox 上編寫CSS, 同時兼容其餘瀏覽器的. 這樣作確定會比在 IE 作好再到別的瀏覽器兼容來得容易, 由於 IE 對老標準支持仍是很不錯的, 而 IE 的一些特有功能人家卻不支持. 因此推薦以 Firefox 結合 Firebug 擴展做爲平臺。

(2). CSS Hack 的順序

使用 Firefox 做爲平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會不少的, IE 之外的瀏覽器幾乎都不會有問題, 因此能夠暫時忽略,

順序以下：Firefox -> IE6 -> IE7 -> 其餘

(3). Hack 的方法

說到方法有兩種, 一種是在不一樣文件中處理, 另外一種則是在同一個文件中處理. 其實做用是相同的, 只是出發點不同而已.

1. 同一文件中處理.
如: id="bgcolor"的控件要在 IE6中顯示藍色, IE7中顯示綠色, Firefox等其餘瀏覽器中顯示紅色。

IE6不認 !important,也不認 *+html.因此 IE6只能是 blue.
IE7認 !important,也認 *+html,優先度: (*+html + !important) > !important > +html. IE7能夠是 red, blue和 green,但 green的優先度最高.
Firefox和其餘瀏覽器都認 !important. !important優先, Firefox能夠是 red和 blue,但 red優先度高.上述的優先符號均是 CSS3標準容許的,其餘瀏覽器也還有其餘的 Hack方法,但我迄今還沒遇到過 Firefox正常, IE之外的其餘瀏覽器不正常的狀況,因此無可分享.只要代碼規範,相信這種狀況的發生應該是很罕見 (JavaScript除外).

2. 不一樣文件中處理.爲何同一文件中能夠處理還要寫在多個文件裏面針對不一樣的瀏覽器?這是爲了欺騙 W3C的驗證工具,其實只須要兩個文件,一個是針對全部瀏覽器的,一個只爲 IE服務.將全部符合 W3C的代碼寫到一個裏面去,而一些 IE中必須的,又不能經過 W3C驗證的代碼 (如: cursor:hand;)放到另外一個文件中,再用下面的方法導入.