CSS書寫順序
*{
/*顯示屬性*/
display
position
float
clear
cursor
…

/*盒模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字*/
color
font
content

/*邊框背景 為什么要把 boder和background放在最后的原因是修改的頻率會(huì)較之前的頻繁，放在最后查看起來方便，哈哈。*/
border
background
}
下表順序?yàn)閺纳系较?，從左到右?
========================

display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor

CSS命名規(guī)則：
一．文件命名規(guī)范
全局樣式：global.css；
框架布局：layout.css；
字體樣式：font.css；
鏈接樣式：link.css；
打印樣式：print.css；
主要的 master.css
專欄 columns.css
主題 themes.css
主要的 master.css
模塊 module.css
基本共用 base.css
表單 forms.css
補(bǔ)丁 mend.css
二．頁面結(jié)構(gòu)
容 器: container
頁 頭：header
內(nèi) 容：content
頁面主體：main
頁 尾：footer
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
三．導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
摘要: summary
四．功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright

Container div
#container
容器
Layout
#layout
布局
Header or banner div
#head, #header
頁頭部分
Footer div
#foot, #footer
頁腳部分
Navigation list
#nav
主導(dǎo)航
Sub-navigation list
#subNav
二級(jí)導(dǎo)航
Menu
#menu
菜單
Sub Menu
#submenu
子菜單
Left or right side columns
#sidebar_a, #sidebar_b
左邊欄或右邊欄
Main div
#main
頁面主體
Tag
#tag
標(biāo)簽
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情連接
Title
#title
標(biāo)題
Summary
#summary
摘要
Search input
#searchInput
搜索輸入框
Search output
#search_output
搜索輸出和搜索結(jié)果相似
Search
#search
搜索
Search bar
#searchBar
搜索條
Search results
#search_results
搜索結(jié)果
Copyright information
#copyright
版權(quán)信息
brand
#branding
商標(biāo)
branding-logo
#logo
LOGO
Site information
#siteinfo
網(wǎng)站信息
Copyright information etc.
#siteinfoLegal
法律聲明
Designer or other credits
#siteinfoCredits
信譽(yù)
Join us
#joinus
加入我們
Partnership opportunities
#partner
合作伙伴
Services
#service
服務(wù)
Regsiter
#regsiter
注冊(cè)
Arrow
arr/arrow
箭頭
Little
#little
標(biāo)題
Website map
#sitemap
網(wǎng)站地圖
List
#list
列表
Home page
#homepage
首頁
Sub page
subpage
二級(jí)頁面子頁面
Toolbar
#tool, #toolbar
工具條
Next pulls
#drop
下拉
Next pulls menu
#dorpmenu
下拉菜單
Status
#status
狀態(tài)
Container div
#container
容器
Header or banner div
#header
頁頭部分
Main or global navigation div
#mainNav
主導(dǎo)航
Menu
#menu
菜單
Sub Menu
#submenu
子菜單
Left or right side columns
#sidebarA, #sidebarB
左邊欄或右邊欄
Main div
#main
頁面主體
Content div
#content
內(nèi)容部分
The main content area
#contentMain
主要內(nèi)容區(qū)域
Footer div
#footer
頁腳部分
Tag
#tag
標(biāo)簽
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情連接
Title
#title
標(biāo)題
Summary
#summary
摘要
Sub-navigation list
#subNav
二級(jí)導(dǎo)航
Search input
#searchInput
搜索輸入框
Search output
#searchOutput
搜索輸出和搜索結(jié)果相似
Search
#search
搜索
Search results
#searchResults
搜索結(jié)果
Copyright information
#copyright
版權(quán)信息
brand
#branding
商標(biāo)
branding-logo
#brandingLogo
LOGO
Site information
#siteinfo
網(wǎng)站信息
Copyright information etc.
#siteinfoLegal
法律聲明
Designer or other credits
#siteinfoCredits
信譽(yù)
Join us
#joinus
加入我們
Partnership opportunities
#partner
合作伙伴
Services
#service
服務(wù)
Regsiter
#regsiter
注冊(cè)
Status
#status
狀態(tài)
Products
.products
產(chǎn)品
Products prices
.productsPrices
產(chǎn)品價(jià)格
Products description
.productsDescription
產(chǎn)品描述
Products review
.productsReview
產(chǎn)品評(píng)論
Editor’s review
.editorReview
編輯評(píng)論
New release
.newsRelease
最新產(chǎn)品
Publisher
.publisher
生產(chǎn)商
Screen shot
.screenshot
縮略圖
FAQ
.faqs
常見問題
Keyword
.keyword
關(guān)鍵詞
Blog
.blog
博客
Forum
.forum
論壇

五class的命名:
(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用“font+字體大小“作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標(biāo)題欄樣式,使用“類別+功能“的方式命名,如
.barnews { }
.barproduct { }

XHTML-CSS寫作建議
1. 所有的xhtml代碼小寫
2. 屬性的值一定要用雙引號(hào)(“”)括起來，且一定要有值
3. 每個(gè)標(biāo)簽都要有開始和結(jié)束，且要有正確的層次
4. 空元素要有結(jié)束的tag或于開始的tag后加上“/”
5. 表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等
6. <h1>到<h5>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7. 給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id
8. 給重要的區(qū)塊加上注釋,如：
9. 給圖片加上alt標(biāo)簽
10. 所有的標(biāo)簽必須進(jìn)行合理的嵌套
11. 根元素前必須有元素，宣告使用那一種DTD
12. 根元素必須有xmlns屬性來指定使用http://www.w3.org/1999/xhtml的namespace
一. 常規(guī)書寫規(guī)范及方法
1. 選擇DOCTYPE：
XHTML 1.0 提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，例如<br>。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):專門針對(duì)框架頁面設(shè)計(jì)使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情況當(dāng)然是嚴(yán)格的DTD，但對(duì)于我們大多數(shù)剛接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通過W3C的代碼校驗(yàn)。
2. 指定語言及字符集：
為文檔指定語言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
為了被瀏覽器正確解釋和通過W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：
常用的語言定義：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
標(biāo)準(zhǔn)的XML文檔語言定義：
<?xml version=”1.0″ encoding=” utf-8″?>
針對(duì)老版本的瀏覽器的語言定義：
<meta http-equiv=”Content-Language” content=” utf-8″ />
為提高字符集，建議采用“utf-8”。
3. 調(diào)用樣式表：
外部樣式表調(diào)用：
頁面內(nèi)嵌法：就是將樣式表直接寫在頁面代碼的head區(qū)。 如：
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部調(diào)用法：將樣式表寫在一個(gè)獨(dú)立的.css文件中，然后在頁面head區(qū)用類似以下代碼調(diào)用。
<link rel=”stylesheet” rev=”stylesheet” href=style.css” type=”text/css” media=”all” />
在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，推薦使用外部調(diào)用法，可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，可以改變所有文件的樣式。
4、選用恰當(dāng)?shù)脑兀?
根據(jù)文檔的結(jié)構(gòu)來選擇HTML元素，而不是根據(jù)HTML元素的樣式來選擇。例如，使用P元素來包含文字段落，而不是為了換行。如果在創(chuàng)建文檔時(shí)找不到適當(dāng)?shù)脑兀瑒t可以考慮使用通用的div 或者是span；
避免過渡使用div和span。少量、適當(dāng)?shù)氖褂胐iv和span元素可以使文檔的結(jié)構(gòu)更加清晰合理并且易于使用樣式；
盡可能少地使用標(biāo)簽和結(jié)構(gòu)嵌套，這樣不但可以使文檔結(jié)構(gòu)清晰，同時(shí)也可以保持文件的小巧，在提高用戶下載速度的同時(shí)，也易于瀏覽器對(duì)文檔的解釋及呈視；
5、派生選擇器：
可以使用派生選擇器給一個(gè)元素里的子元素定義樣式，在簡(jiǎn)化命名的同時(shí)也使結(jié)構(gòu)更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.gif;)}
6、輔助圖片用背影圖處理：
這里的”輔助圖片”是指那些不是作為頁面要表達(dá)的內(nèi)容的一部分，而僅僅用于修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動(dòng)頁面的情況下通過CSS樣式來進(jìn)行改動(dòng)，如： #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、結(jié)構(gòu)與樣式分離：
在頁面里只寫入文檔的結(jié)構(gòu)，而將樣式寫于css文件中，通過外部調(diào)用CSS樣式表來實(shí)現(xiàn)結(jié)構(gòu)與樣式的分離。
8、文檔的結(jié)構(gòu)化書寫：
頁面CSS文檔都應(yīng)采用結(jié)構(gòu)化的書寫方式，邏輯清晰易于閱讀。如：
<div id=”mainMenu”>
<ul>
<li><a href=SPAN>”#” >首頁</a></li>
<li><a href=SPAN>”#” >介紹</a></li>
<li><a href=SPAN>”#” >服務(wù)</a></li>
</ul>
</div>

/*=====主導(dǎo)航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主導(dǎo)航結(jié)束=====*/
9、鼠標(biāo)手勢(shì)：
在XHTML標(biāo)準(zhǔn)中，hand只被IE識(shí)別，當(dāng)需要將鼠標(biāo)手勢(shì)轉(zhuǎn)換為“手形”時(shí)，則將“hand”換為“pointer”，即“cursor:pointer;”
10．注釋書寫規(guī)范
1、行間注釋：
直接寫于屬性值后面，如：
.search{
border:1px solid #fff;/*定義搜索輸入框邊框*/
background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
}
2、整段注釋：
分別在開始及結(jié)束地方加入注釋，如：
/*=====搜索條=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索條結(jié)束=====*/
3．協(xié)助注釋
非作者維護(hù)時(shí)所加入的表示修改時(shí)間、修改人等標(biāo)識(shí)信息。
在區(qū)域注釋或單行注釋的基礎(chǔ)上加上修改人和修改時(shí)間等信息。
例(區(qū)域注釋)：
<!--==S 注釋內(nèi)容[修改人和修改時(shí)間]-->
<div>
...
</div>
<!--==E 注釋內(nèi)容[修改人和修改時(shí)間]-->
/*=S 注釋內(nèi)容[修改人和修改時(shí)間]*/
.class{
...
}
.class{
...
}
/*=E 注釋內(nèi)容[修改人和修改時(shí)間]*/
例(單行注釋)：
<div>
<!-- 注釋內(nèi)容[修改人和修改時(shí)間]-->
...
</div>
.class{
/*注釋內(nèi)容[修改人和修改時(shí)間]*/
...
}
11．樣式屬性代碼縮寫
1、不同類有相同屬性及屬性值的縮寫：
對(duì)于兩個(gè)不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時(shí)，應(yīng)對(duì)其加以合并縮寫，特別是當(dāng)有多個(gè)不同的類而有相同的屬性及屬性值時(shí)，合并縮寫可以減少代碼量并易于控制。如：
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
兩個(gè)不同類的屬性值有重復(fù)之處，剛可以縮寫為：
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同一屬性的縮寫：
同一屬性根據(jù)它的屬性值也可以進(jìn)行簡(jiǎn)寫，如：
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、內(nèi)外側(cè)邊框的縮寫：
在CSS中關(guān)于內(nèi)外側(cè)邊框的距離是按照上、右、下、左的順序來排列的，當(dāng)這四個(gè)屬性值不同時(shí)也可直接縮寫，如：
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
則可縮寫為：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

而如果當(dāng)上邊與下邊、左邊與右邊的邊框?qū)傩灾迪嗤瑫r(shí)，則屬性值可以直接縮寫為兩個(gè)，如： .btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}

縮寫為： .btn {margin:10px 5px;}
而當(dāng)上下左右四個(gè)邊框的屬性值都相同時(shí)，則可以直接縮寫成一個(gè)，如：
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
縮寫為：
.btn{margin:10px;}
4、顏色值的縮寫：
當(dāng)RGB三個(gè)顏色值數(shù)值相同時(shí)，可縮寫顏色值代碼。如：
.menu { color:#ff3333;}
可縮寫為:
.menu {color:#f33;}
12．hack書寫規(guī)范
因?yàn)椴煌瑸g覽器對(duì)W3C標(biāo)準(zhǔn)的支持不一樣，各個(gè)瀏覽器對(duì)于頁面的解釋呈視也不盡相同，比如IE在很多情況下就與FF存在3px的差距，對(duì)于這些差異性，就需要利用css 的hack來進(jìn)行調(diào)整，當(dāng)然在沒有必要的情況下，最好不要寫hack來進(jìn)行調(diào)整，避免因?yàn)閔ack而導(dǎo)致頁面出現(xiàn)問題。
1、 IE6、IE7、Firefox之間的兼容寫法：
寫法一：
IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；
IE6能識(shí)別*，但不能識(shí)別 !important,
IE7能識(shí)別*，也能識(shí)別!important;
FF不能識(shí)別*，但能識(shí)別!important;
根據(jù)上述表達(dá)，同一類/ID下的CSS hack可寫為：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*僅IE7*/
*background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序?yàn)椋篎F、IE7、IE6.
寫法二：
IE6可識(shí)別“_”，而IE7及FF皆不能識(shí)別，所以當(dāng)只針對(duì)IE6與IE7及FF之間的區(qū)別時(shí)，可這樣書寫：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*僅IE6可識(shí)別*/
}
寫法三：
*+html 與 *html 是IE特有的標(biāo)簽, Firefox 暫不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*僅IE6*/
*+html .searchInput {background-color:#555;}/*僅IE7*/
屏蔽IE瀏覽器：
select是選擇符，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。
*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
IE6可識(shí)別：
這里主要是通過CSS注釋分開一個(gè)屬性與值，注釋在冒號(hào)前。
select { display /*IE6不識(shí)別*/:none;}
IE的if條件hack寫法：
所有的IE可識(shí)別：
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以識(shí)別:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包換IE5.5都可以識(shí)別:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
僅IE6可識(shí)別:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可識(shí)別:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
僅IE7可識(shí)別:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
13、清除浮動(dòng)：
在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問題。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

注意事項(xiàng):
1. id和class命名采用該版塊的英文單詞或組合命名，并第一個(gè)單詞小寫，第二個(gè)單詞首個(gè)字母大寫，如:newRelease（最新產(chǎn)品/new+Release)
常用類的命名應(yīng)盡量以常見英文單詞為準(zhǔn)，做到通俗易懂，并在適當(dāng)?shù)牡胤郊右宰⑨?。?duì)于二級(jí)類/ID命名，則采用組合書寫的模式，后一個(gè)單詞的首字母應(yīng)大寫：諸如“搜索框”則應(yīng)命名為“searchInput”、“搜索圖標(biāo)”命名這“searchIcon”、“搜索按鈕”命名為 “searchBtn”……
2. CSS樣式表各區(qū)塊用注釋說明
3. 盡量使用英文命名原則
4. 不用加中杠和下劃線
5. 盡量不縮寫，除非一看就明白的單詞
6．檢查HTML元素是否有拼寫錯(cuò)誤、是否忘記結(jié)束標(biāo)記
即使是老手也經(jīng)常會(huì)弄錯(cuò)div的嵌套關(guān)系。可以用dreamweaver的驗(yàn)證功能檢查一下有無錯(cuò)誤。
7. 檢查CSS是否正確
檢查一下有無拼寫錯(cuò)誤、是否忘記結(jié)尾的 } 等?？梢岳肅leanCSS來檢查 CSS的拼寫錯(cuò)誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯(cuò)誤。
8. 確定錯(cuò)誤發(fā)生的位置
如果錯(cuò)誤影響了整體布局，則可以逐個(gè)刪除div塊，直到刪除某個(gè)div塊后顯示恢復(fù)正常，即可確定錯(cuò)誤發(fā)生的位置。
9. 利用border屬性確定出錯(cuò)元素的布局特性
使用float屬性布局一不小心就會(huì)出錯(cuò)。這時(shí)為元素添加border屬性確定元素邊界，錯(cuò)誤原因即水落石出。
10. float元素的父元素不能指定clear屬性
MacIE下如果對(duì)float的元素的父元素使用clear屬性，周圍的float元素布局就會(huì)混亂。這是MacIE的著名的bug，倘若不知道就會(huì)走彎路。
11. float元素務(wù)必指定width屬性
很多瀏覽器在顯示未指定width的float元素時(shí)會(huì)有bug。所以不管float元素的內(nèi)容如何，一定要為其指定width屬性。
另外指定元素時(shí)盡量使用em而不是px做單位。
12. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時(shí)有bug。因此不要對(duì)float元素指定margin和padding屬性（可以在float元素內(nèi)部嵌套一個(gè)div來設(shè)置margin和padding）。也可以使用hack方法為IE指定特別的值。
13. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請(qǐng)保證寬度之和小于99%。
14. 是否重設(shè)了默認(rèn)的樣式？
某些屬性如margin、padding等，不同瀏覽器會(huì)有不同的解釋。因此最好在開發(fā)前首先將全體的margin、padding設(shè)置為0、列表樣式設(shè)置為none等。
15、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)
程序代碼
<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在 程序代碼
<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>
之間加上 程序代碼
<#div class=”clear”></#div>
這個(gè)div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系，否則會(huì)產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可：
程序代碼
.clear{
clear:both;}
此外，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE??！)用zoom:1;可以做到，這樣就達(dá)到了兼容。
例如某一個(gè)wrapper如下定義：
程序代碼
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
16、margin加倍的問題。
設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。
解決方案是在這個(gè)div里面加上display:inline;
例如：
<#div id=”imfloat”></#div>
相應(yīng)的css為
程序代碼
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
17、關(guān)于容器的包涵關(guān)系
很多時(shí)候，尤其是容器內(nèi)有平行布局，例如兩、三個(gè)float的div時(shí)，寬度很容易出現(xiàn)問題。在IE中，外層的寬度會(huì)被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級(jí)的精度。
18、關(guān)于高度的問題
如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_，不知道具體怎么回事）

常見兼容問題：
1.DOCTYPE 影響 CSS 處理
2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行
3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:XXpx!important;

10.IE5 和IE6的BOX解釋不一致
IE5下 程序代碼
div{width:300px;margin:0 10px 0 10px;}
div的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計(jì)算的。這時(shí)我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關(guān)于這個(gè)/**/是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持，如果有人理解的話，請(qǐng)告訴我一聲，謝了！：）
11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義
程序代碼ul{margin:0;padding:0;}
注意書寫格式的問題：
一定要注意縮進(jìn)。對(duì)齊。要有良好的編程習(xí)慣。

最新評(píng)論