1.ie8下兼容問題，這個最好處理,，轉(zhuǎn)化成ie7兼容就可以。在頭部加如下一段代碼,，然后只要在ie7下兼容了,，ie8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />
2.flaot浮動造成ie6下面雙倍邊距問題，這個最常見,，也最好處理,，!important解決，比如
margin-left:10px !important;/*ie7,ie8,ff下是10px*/;
margin-left:5px;/*ie6下屬性寫的是5px,，但在顯示出來的是10px
3.清除塊display,，這個可以解決浮動造成的塊，造成塊后,，當div背景填色或填圖片的時候,，會出現(xiàn)背景斷開或差一小塊。這種兼容出現(xiàn)的不太多,，我做到現(xiàn)在,，只遇到過兩次，方法是在出現(xiàn)兼容的div的css中寫一個display:block,，或其它屬性,，中文什么意思我不知道，我英語差,，但能達到想要的效果,，6 e" z e% |8 g# |
4.很多朋友div css的時候，會出現(xiàn),，在ie的幾個瀏覽器下都好了,，但是在ff出問題了，用!important又會把ie7做的不兼容,，很頭疼,，在想，有沒有什么方法只對ff下進行操做,，我用過這個方法,，感覺得是百試不爽，就是在屬性前面加符號如：*、&,，￥,，#，@,，―,， ，加過符號的屬性只有ie的瀏覽器才識別,，而ff不識別,，方法如下(注意有符號的屬性和沒符號的屬性的順序)
height:100px;/*ff下顯示100的高*/
height:120px;/*ie678下顯示120高*/
5.有時候，會在布局的時候,，發(fā)現(xiàn),，有一個div浮動了，接下來的一個div本來是要在下面顯示的,，結(jié)果跑上面去了,，這種情況一般在ff下面會出現(xiàn)，解決的辦法就是清除一下浮動,，在設(shè)置過浮動的那個div下面加一個div,，css面寫個clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
6. 再就是居中問題，這個問題在新手身上很多,，主要原因是對盒子模型不夠理解,，沒熟記盒子模型，如果發(fā)現(xiàn)你的頁面沒有局中,，我現(xiàn)在知道的,，有這幾個原因：1. 一個是沒盒子，就是body后的一個大div把所有div裝起來的那個,，你沒寫,。2.就是你寫了，但是寬度沒用絕對寬度：而是用一個相對的寬度,，想局中,，必須用絕對寬度。-
7.擴展：如果我想在設(shè)計的時候,，實現(xiàn)ie6,，ie7,ff下出現(xiàn)三種不同的效果，比如ie6下背景紅色,，ie7下藍色ff下綠色，這里,，我自己試過,，可以，用兼容的方法（注意順序，可以好好理解一下）,。7 l& t- o7 k- a1 i
background:red;/*ff里顯示的紅色*/
background:blue !important;/*ie7下面顯示的藍色*/
background:green;/*ie6下面顯示的綠色*/
- .color{
-
- background-color: #cc00ff;
-
- background-color: #ff0000\9;
-
- *background-color: #0066ff;
-
- _background-color: #009933;
-
- }
.color{background-color: #cc00ff;background-color: #ff0000\9;*background-color: #0066ff;_background-color: #009933;}
**記住上面得樣式解釋為順序是 ff,、ie8、ie7,、ie6 **
顯示的結(jié)果：
用火狐瀏覽,，顏色是紫色
用 ie8 瀏覽，顏色是紅色
用 ie7 瀏覽,，顏色是藍色
用 ie6 瀏覽,，顏色是綠色
如果你只是為了兼容ie7和8，其實可以在<head>里加上這樣一條代碼：
所有瀏覽器 通用
height: 100px;
ie6 專用
_height: 100px;
ie6 專用
*height: 100px;
ie7 專用
* height: 100px;
ie7,、ff 共用
height: 100px !important;
一,、css hack
1, !important
隨著ie7對!important的支持, !important 方法現(xiàn)在只針對ie6的hack.(注意寫法.記得該聲明位置需要提前.)
以下為引用的內(nèi)容：
<style>
#wrapper
{
width: 100px!important; /* ie7 ff */
width: 80px; /* ie6 */
}
</style> |
2, ie6/ie7對firefox
以下為引用的內(nèi)容：
* html 與 *html 是ie特有的標簽, firefox 暫不支持.而* html 又為 ie7特有標簽.
<style>
#wrapper
{
#wrapper { width: 120px; } /* firefox */
*html #wrapper { width: 80px;} /* ie6 fixed */
* html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
</style> |
注意:
* html 對ie7的hack 必須保證html頂部有如下聲明：
<!doctype html public “-//w3c//dtd html 4.01 transitional//en” ”http://www./tr/html4/loose.dtd”>
二、萬能 float 閉合
關(guān)于 clear float 的原理可參見 [how to clear floats without structural markup]
將以下代碼加入global css 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
以下為引用的內(nèi)容：<style>
/* clear fix */.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* hide from ie mac */
.clearfix {display:block;}
/* end hide from ie mac */
/* end of clearfix */
</style> |
三,、其他兼容技巧
1, ff下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加, 但ie不會.(可用!important解決) 如width:115px !important;width:120px;padding:5px;
必須注意的是,， !important; 一定要在前面。
2, 居中問題.
1).垂直居中.將 line-height 設(shè)置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內(nèi)容不要換行.)
2).水平居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標簽)
4, ff 和 ie 對 box 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.
5, ul 標簽在 ff 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標簽和內(nèi)容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應(yīng).
7, 關(guān)于手形光標. cursor: pointer. 而hand 只適用于 ie.
兼容代碼:兼容最推薦的模式,。
/* ff */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* ie6 */
*html .submitbutton {
margin-top: 21px;
}
/* ie7 */
* html .submitbutton {
margin-top: 21px;
}
什么是瀏覽器兼容：當我們使用不同的瀏覽器（firefox ie7 ie6）訪問同一個網(wǎng)站,，或者頁面的時候，會出現(xiàn)一些不兼容的問題,，有的顯示出來正常,，有的顯示出來不正常，我們在編寫css的時候會很惱火,，剛修復(fù)了這個瀏覽器的問題,，結(jié)果另外一個瀏覽器卻出了新問題。而兼容就是一種辦法,，能讓你在一個css里面獨立的寫支持不同瀏覽器的樣式,。這下就和諧了。呵呵,！
最近微軟發(fā)布的ie7瀏覽器的兼容性確實給一些網(wǎng)頁制作人員添加了一個沉重的負擔(dān),，雖然ie7已經(jīng)走向標準化，但還是有許多和ff不同的地方,，所以需要用到ie7的兼容,。
有一點邏輯思想的人都會知道可以用ie和ff的兼容結(jié)合起來使用，下面介紹三個兼容,，例如：（適合新手,，呵呵，高手就在這里路過吧,。）
程序代碼
第一個兼容,，ie ff 所有瀏覽器 公用（其實也不算是兼容）
height:100px;
第二個兼容 ie6專用
_height:100px;
第三個兼容 ie6 ie7公用
*height:100px;
介紹完了這三個兼容了,，下面我們再來看看如何在一個樣式里分別給一個屬性定義ie6 ie7 ff專用的兼容，看下面的代碼,，順序不能錯哦：
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：
在ff下,，第2、3個屬性ff不認識,，所以它讀的是 height:100px;
在ie7下,，第三個屬性ie7不認識，所以它讀第1,、2個屬性,，又因為第二個屬性覆蓋了第一個屬性，所以ie7最終讀出的是第2個屬性 *height:120px;
在ie6下,，三個屬性ie6都認識,，所以三個屬性都可以讀取，又因為第三個屬性覆蓋掉前2個屬性,，所以ie6最終讀取的是第三個屬性,。
1 針對firefox ie6 ie7的css樣式
現(xiàn)在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示,，
但是ie7對!important可以正確解釋,，會導(dǎo)致頁面沒按要求顯示！找到一個針
對ie7不錯的hack方式就是使用“* html”,，現(xiàn)在用ie7瀏覽一下,，應(yīng)該沒有問題了。
現(xiàn)在寫一個css可以這樣：
以下為引用的內(nèi)容：
#1 { color: #333; } /* moz */
* html #1 { color: #666; } /* ie6 */
* html #1 { color: #999; } /* ie7 */ |
那么在firefox下字體顏色顯示為#333,，ie6下字體顏色顯示為#666,，ie7下字體顏色顯示為#999。
2 css布局中的居中問題
主要的樣式定義如下：
body {text-align: center;}
#center { margin-right: auto; margin-left: auto; }
說明：
首先在父級元素定義text-align: center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中,；對于ie這樣設(shè)定就已經(jīng)可以了,。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設(shè)定時再加上“margin-right: auto;margin-left: auto; ”
需要說明的是,，如果你想用這個方法使整個頁面要居中,，建議不要套在一個div里，你可以依次拆出多個div,，
只要在每個拆出的div里定義margin-right: auto;margin-left: auto; 就可以了,。
3 盒模型不同解釋
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff ie6.0 width /**/:500px; //for ie6.0-}
4 浮動ie產(chǎn)生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下ie會產(chǎn)生200px的距離 display:inline; //使浮動忽略}
這里細說一下block,inline兩個元素,block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);inline元素的特點是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);
#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實現(xiàn)同一行排列的的效果 diplay:table;
ie不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使,。這樣問題就大了,，如果只用寬度和高度，
正常的瀏覽器里這兩個值就不會變,，如果只用min-width和min-height的話,，ie下面根本等于沒有設(shè)置寬度和高度,。
比如要設(shè)置背景圖片,，這個寬度是比較重要的,。要解決這個問題，可以這樣：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁面的最小寬度
min-width是個非常方便的css命令,，它可以指定元素最小也不能小于某個寬度,，這樣就能保證排版一直正確。但ie不認得這個,，
而它實際上把width當做最小寬度來使,。為了讓這一命令在ie上也能用，可以把一個<div> 放到 <body> 標簽下,，然后為div指定一個類：
然后css這樣設(shè)計：
#container{ min-width: 600px; width:expression(document.body.clientwidth < 600? “600px”: “auto” );}
第一個min-width是正常的,；但第2行的width使用了javascript，這只有ie才認得,，這也會讓你的html文檔不太正規(guī),。它實際上通過javascript的判斷來實現(xiàn)最小寬度。
7 清除浮動
.hackbox{ display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;}
或者加入:after（偽對象）,設(shè)置在對象后發(fā)生的內(nèi)容,，通常和content配合使用,，ie不支持此偽對象，非ie 瀏覽器支持,，
所 以并不影響到ie/win瀏覽器,。這種的最麻煩的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 div浮動ie文本產(chǎn)生3象素的bug
左邊對象浮動，右邊采用外補丁的左邊距來定位,，右邊對象內(nèi)的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關(guān)鍵}
html代碼<div id=”box”> <div id=”left”></div> <div id=”right”></div></div>
9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
這個對于ie6.0和ie6.0以下的版本都隱藏,ff和opera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.
10 ie捉迷藏的問題
當div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接,，div等這個時候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來,，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面,。
解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單,。
11 高度不適應(yīng)
高度不適應(yīng)是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié),，特別是當內(nèi)層對象使用
margin 或paddign 時。例：
<div id=”box”>
<p>p對象中的內(nèi)容</p>
</div>
css：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解決方法：在p對象上下各加2個空的div對象css代碼：.1{height:0px;overflow:hidden;}或者為div加上border屬性,。
屏蔽ie瀏覽器（也就是ie下不顯示）
*:lang(zh) select {font:12px !important;} /*ff,op可見*/
select:empty {font:12px !important;} /*safari可見*/
這里select是選擇符,，根據(jù)情況更換。第二句是mac上safari瀏覽器獨有的,。
僅ie7識別
* html {…}
當面臨需要只針對ie7做樣式的時候就可以采用這個兼容,。
ie6及ie6以下識別
* html {…}
這個地方要特別注意很多地主都寫了是ie6的兼容其實ie5.x同樣可以識別這個兼容。其它瀏覽器不識別,。
html/**/ >body select {……}
這句與上一句的作用相同,。
僅ie6不識別
select { display /*ie6不識別*/:none;}
這里主要是通過css注釋分開一個屬性與值,，流釋在冒號前。
僅ie6與ie5不識別
select/**/ { display /*ie6,ie5不識別*/:none;}
這里與上面一句不同的是在選擇符與花括號之間多了一個css注釋,。
僅ie5不識別
select/*ie5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區(qū)的注釋,。只有ie5不識別
盒模型解決方法
selct {width:ie5.x寬度; voice-family :""}""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確,。
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在firefox中,，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級,，那么這時用這個清除浮動的兼容來對父級做一次定義,，那么就可以解決這個問題 。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
這個是在越出長度后會自行的截掉多出部分的文字,，并以省略號結(jié)尾,，很好的一個技術(shù)。只是目前firefox并不支持,。
只有opera識別
@media all and (min-width: 0px){ select {……} }
針對opera瀏覽器做單獨的設(shè)定,。
以上都是寫css中的一些兼容，建議遵循正確的標簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系),，這樣可以減少你使用兼容的頻率,，不要進入理解誤區(qū)，并不是一個頁面就需要很多的兼容來保持多瀏覽器兼容),，很多情況下也許一個兼容都不用也可以讓瀏覽器工作得非常好,，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內(nèi)容也分離出來,，不妨試一下下面的幾種過濾器,。這些過濾器有的是寫在css中通過過濾器導(dǎo)入特別的樣式，也有的是寫在html中的通過條件來鏈接或是導(dǎo)入需要的補丁樣式,。
ie5.x的過濾器,，只有ie5.x可見
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */
ie5/mac的過濾器，一般用不著
/**//*/
@import "ie5mac.css";
/**/
下面是ie的條件注釋,，個人覺得用條件注釋調(diào)用相應(yīng) 兼容是比較完美的多瀏覽器兼容的解決辦法,。把需要兼容的地方單獨放到一個文件里面，當瀏覽器版本符合的時候就可以調(diào)用那個被兼容的樣式,，這樣不僅使用起來非常方便,，而且對于制作這個css本身來講，可以更嚴格的觀察到是否有必要使用兼容,，很多情況下,，當我本人寫css如果把全部代碼包括兼容都寫到一個css文件的時候的時候會很隨意，想怎么兼容就怎么兼容,，而你獨立出來寫的時候,，你就會不自覺的考慮是否有必要兼容,，是先兼容 css？還是先把主css里面的東西調(diào)整到盡可能的不需要兼容,？當你僅用很少的兼容就讓很多瀏覽器很乖很聽話的時候,，你是不是很有成就感呢？你知道怎么選擇了吧～～呵呵
ie的if條件兼容 自己可以靈活使用參看這篇ie條件注釋
only ie
所有的ie可識別
只有ie5.0可以識別
only ie 5.0
ie5.0包換ie5.5都可以識別
僅ie6可識別
only ie 7/-
ie6以及ie6以下的ie5.x都可識別
only ie 7/-
僅ie7可識別
css 當中有許多的東西不按照某些規(guī)律來的話,，會讓你很心煩,，雖然你可以通過很多的兼容,，很多的!important 來控制它,，但是你會發(fā)現(xiàn)長此以往你會很不甘心，看看許多優(yōu)秀的網(wǎng)站,，他們的css讓ie6,ie7,firefox,甚至safari,opera運行起來完美無缺是不是很羨慕,？而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實你要知道ie 和 firefox 并不不是那么的不和諧,，我們找到一定的方法,，是完全可以讓他們和諧共處的。不要你認為發(fā)現(xiàn)了兼容的辦法,，你就掌握了一切,，我們并不是兼容的奴隸。
div ul li 的嵌套順序
今天只講一個規(guī)則,。就是<div><ul><li>的三角關(guān)系,。我的經(jīng)驗就是<div>在最外面，里面是<ul>,，然后再是<li>,，當然<li>里面又可以嵌套<div>什么的，但是并不建議你嵌套很多東西,。當你符合這樣的規(guī)則的時候,，那些倒霉的，不聽話的間隙就不會在里面出現(xiàn)了,，當你僅僅是<div>里面放<li>,，而不用<ul>的時候，你會發(fā)現(xiàn)你的間隙十分難控制,，一般情況下,，ie6和ie7會憑空多一些間距。但很多情況你來到下一行,，間隙就沒了,，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變ie的margin,，然后調(diào)整firefox下面的padding,，以便使得兩者顯示起來得效果很相似,，但是你得css將變得臭長無比，你不得不多考慮更多可能出現(xiàn)這種問題補救措施,，雖然你知道千篇一律來兼容它們,，但是你會煩得要命。
具體嵌套寫法
遵循上面得嵌套方式,，<div><ul><li></li></ul></div> 然后在css 里面告訴 ul {margin:0px;padding:0px;list-style:none;},，其中l(wèi)ist-style:none是不讓<li>標記的最前方顯示圓點或者數(shù)字等目錄類型的標記，因為ie和firefox顯示出來默認效果有些不一樣,。因此這樣不需要做任何手腳,，你的ie6、和ie7,、firefox顯示出來的東西(外距,，間距，高度,，寬度)就幾乎沒什么區(qū)別了,，也許細心的你會在某一個時刻發(fā)現(xiàn)：兩個象素的差別，但那已經(jīng)很完美了,，不需要你通過調(diào)整大片的css來控制它們的顯示了,，你愿意，你可以僅僅兼容一兩個地方,，而且通常這種兼容可以適應(yīng)各種地方,，不需要你重復(fù)在不同的地方調(diào)試不同的兼容方式c減輕你的煩。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,，而統(tǒng)一兼容,。嘗試一下吧，再也不要亂嵌套了,，雖然在div css的方式下你幾乎可以想怎么嵌套就怎么嵌套,，但是按照上面的規(guī)律你將輕松很多，從而事半功倍,！
六,、css兼容要點分析ie vs ff
css 兼容要點：
doctype 影響 css 處理
ff: div 設(shè)置 margin-left, margin-right 為 auto 時已經(jīng)居中, ie 不行
ff: body 設(shè)置 text-align 時, div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
ff: 設(shè)置 padding 后, div 會增加 height 和 width, 但 ie 不會, 故需要用 !important 多設(shè)一個 height 和 width
ff: 支持 !important, ie 則忽略, 可用 !important 為 ff 特別設(shè)置樣式
div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個div一樣高 line-height:200px; 然后插入文字，就垂直居中了,。缺點是要控制內(nèi)容不要換行
cursor: pointer 可以同時在 ie ff 中顯示游標手指狀,， hand 僅 ie 可以
ff: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行,。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯位, 若不設(shè) height, 可以在 menubar 中插入一個空格xhtml css兼容性解決方案小集
使用xhtml＋css構(gòu)架好處不少,，但也確實存在一些問題，不論是因為使用不熟練還是思路不清晰，我就先把一些我遇到的問題寫在下面,，省的大家四處找^^
1,、在mozilla firefox和ie中的box模型解釋不一致導(dǎo)致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據(jù)阿捷的說法!important這個屬性ie不能識別,，但別的瀏覽器可以識別,。所以在ie下其實解釋成這樣：
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:xxpx!important;
2,、ie5 和ie6的box解釋不一致ie5下div{width:300px;margin:0 10px 0 10px;}div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px,，而在ie6和其他瀏覽器上寬度則是以300px 10px(右填充) 10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
,，關(guān)于這個/**/是什么我也不太明白,，只知道ie5和firefox都支持但ie6不支持，如果有人理解的話,，請告訴我一聲,，謝了！：）
3,、ul標簽在mozilla中默認是有padding值的,而在ie中只有margin有值所以先定義
ul{margin:0;padding:0;}
就能解決大部分問題。
4,、關(guān)于腳本,，在xhtml1.1中不支持language屬性，只需要把代碼改為
< type=”text/java”>
就可以了
七,、10個你未必知道的css技巧
1,、css字體屬性簡寫規(guī)則
一般用css設(shè)定字體屬性是這樣做的：
| 以下為引用的內(nèi)容：font-weight:bold;font-style:italic;font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
|
但也可以把它們?nèi)繉懙揭恍猩先ィ?/font>
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不錯！只有一點要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用,。而且,，如果你沒有設(shè)定font-weight, font-style, 以及 font-varient ，他們會使用缺省值,，這點要記上,。
2、同時使用兩個類
一般只能給一個元素設(shè)定一個類（class）,，但這并不意味著不能用兩個,。事實上，你可以這樣：
<p class=”text side”>…</p>
同時給p元素兩個類,，中間用空格格開,，這樣所有text和side兩個類的屬性都會加到p元素上來。如果它們兩個類中的屬性有沖突的話,，后設(shè)置的起作用,，即在css文件中放在后面的類的屬性起作用。
補充：對于一個id,，不能這樣寫<p id=”text side”>…</p>也不能這樣寫
3,、css border的缺省值
通?？梢栽O(shè)定邊界的顏色，寬度和風(fēng)格,，如：
border: 3px solid #000
這位把邊界顯示成3像素寬,，黑色，實線,。但實際上這里只需要指定風(fēng)格即可,。
如果只指定了風(fēng)格，其他屬性就會使用缺省值,。一般地,，border的寬度缺省是medium，一般等于3到4個像素,；缺省的顏色是其中文字的顏色,。如果這個值正好合適的話，就不用設(shè)那么多了,。
4,、css用于文檔打印
許多網(wǎng)站上都有一個針對打印的版本，但實際上這并不需要,，因為可以用css來設(shè)定打印風(fēng)格,。
也就是說，可以為頁面指定兩個css文件,，一個用于屏幕顯示,，一個用于打印：
<link type=”text/css” rel=”stylesheet” href=”/blog/stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
第1行就是顯示,，第2行是打印,，注意其中的media屬性。
但應(yīng)該在打印css中寫什么東西呢,？你可以按設(shè)計普通css的方法來設(shè)定它,。設(shè)計的同時就可以把這個css設(shè)成顯示css來檢查它的效果。也許你會使用 display: none 這個命令來關(guān)掉一些裝飾圖片,，再關(guān)掉一些導(dǎo)航按鈕,。要想了解更多，可以看“打印差異”這一篇,。
5,、圖片替換技巧
一般都建議用標準的html來顯示文字，而不要使用圖片,，這樣不但快,，也更具可讀性。但如果你想用一些特殊字體時，就只能用圖片了,。
比如你想整個賣東西的圖標,，你就用了這個圖片：
<h1><img src=”/blog/widget-image.gif” alt=”buy widgets” /></h1>
這當然可以，但對搜索引擎來說,，和正常文字相比,，它們對alt里面的替換文字幾乎沒有興趣這是因為許多設(shè)計者在這里放許多關(guān)鍵詞來騙搜索引擎。所以方法應(yīng)該是這樣的：
<h1>buy widgets</h1>
但這樣就沒有特殊字體了,。要想達到同樣效果,，可以這樣設(shè)計css：
h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height換成真的圖片的高度。這里,，圖片會當作背景顯示出來,，而真正的文字由于設(shè)定了-2000像素這個縮進，它們會出現(xiàn)在屏幕左邊2000點的地方,，就看不見了,。但這對于關(guān)閉圖片的人來說，可能全部看不到了,，這點要注意,。
6、css box模型的另一種調(diào)整技巧
這個box模型的調(diào)整主要是針對ie6之前的ie瀏覽器的,，它們把邊界寬度和空白都算在元素寬度上,。比如：
#box { width: 100px; border: 5px; padding: 20px }
這樣調(diào)用它：
<div id=”box”>…</div>
這時盒子的全寬應(yīng)該是150點，這在除ie6之前的ie瀏覽器之外的所有瀏覽器上都是正確的,。但在ie5這樣的瀏覽器上，它的全寬仍是100點,?？梢杂靡郧叭税l(fā)明的box調(diào)整方法來處理這種差異。
但用css也可以達到同樣的目的,，讓它們顯示效果一致,。
#box { width: 150px } #box div { border: 5px; padding: 20px }
這樣調(diào)用：
<div id=”box”><div>…</div></div>
這樣，不管什么瀏覽器,，寬度都是150點了,。
7、塊元素居中對齊
如果想做個固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話,，通常是這樣：
#content { width: 700px; margin: 0 auto }
你會使用 <div id=”content”> 來圍上所有元素,。這很簡單，但不夠好,，ie6之前版本會顯示不出這種效果,。改css如下：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這會把網(wǎng)頁內(nèi)容都居中，所以在content中又加入了
text-align: left 。
8,、用css來處理垂直對齊
垂直對齊用表格可以很方便地實現(xiàn),，設(shè)定表格單元 vertical-align: middle 就可以了。但對css來說這沒用,。如果你想設(shè)定一個導(dǎo)航條是2em高,，而想讓導(dǎo)航文字垂直居中的話，設(shè)定這個屬性是沒用的,。
css方法是什么呢,？對了，把這些文字的行高設(shè)為 2em：line-height: 2em ,，這就可以了,。
9、css在容器內(nèi)定位
css的一個好處是可以把一個元素任意定位,，在一個容器內(nèi)也可以,。比如對這個容器：
#container { position: relative }
這樣容器內(nèi)所有的元素都會相對定位，可以這樣用：
<div id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30點,，距上5點,，可以這樣：
#navigation { position: absolute; left: 30px; top: 5px }
當然，你還可以這樣：
margin: 5px 0 0 30px
注意4個數(shù)字的順序是：上,、右,、下、左,。當然,，有時候定位的方法而不是邊距的方法更好些。
10,、直通到屏幕底部的背景色
在垂直方向是進行控制是css所不能的,。如果你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到頁面底部，用表格是很方便的,，但如果只用這樣的css：
#navigation { background: blue; width: 150px }
較短的導(dǎo)航條是不會直通到底部的,，半路內(nèi)容結(jié)束時它就結(jié)束了。該怎么辦呢,？
不幸的是,，只能采用欺騙的手段了，給這較短的一欄加上個背景圖,，寬度和欄寬一樣,，并讓它的顏色和設(shè)定的背景色一樣。
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
此時不能用em做單位,，因為那樣的話,，一旦讀者改變了字體大小,，這個花招就會露餡，只能使用px,。
代碼示例：
/*設(shè)置瀏覽器標簽屬性*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; font-size:12px;}
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
/*重設(shè)瀏覽器標簽屬性*/
h1 {font-size: 14px;}
/*設(shè)置整體網(wǎng)頁水平居中 */
body{text-align:center;}
.tbody{width:1004px; text-aling:left}
/*或者（可能某些瀏覽器不支持） */
.tbody{width:1004px; margin: 0 auto;}
/*設(shè)置某id下div水平居中 */
div#container {margin: 0 auto;}
3.控制位置：絕對位置,，相對位置
假如有兩個div
java代碼
1.<div id='parent'>
2.<div id='son'></div>
3.</div>
<div id='parent'>
<div id='son'></div>
</div>
div有l(wèi)eft和top屬性,是用來定位的.
如果內(nèi)層的div的position屬性是absolute.那他就是相對于文檔的左上角的位置..
如果內(nèi)層的div(id為son的那個)position屬性為relative,那它的left和top值就是相對于外層的div的左上角的距離.
4.將重要元素放置在屏幕中央
如果你希望將您想要的東西放在最中央，可以使用以下css：
java代碼
1.div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
2.div.popup { margin-top: -200px; margin-left: -250px;}
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
您必須明確的指定寬度和高度,，再把top和left屬性設(shè)為他們的一半,，這樣就可以是這個部分回到屏幕的中心。
5.可以重復(fù)利用的規(guī)則
java代碼
1..left {float: left;}
2..right {float: right;}
3.img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
4.img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
設(shè)置自己的css樣式表,，就可以在您需要的時候直接的添加標記即可,。
6. 解決ie6 的浮動元素的雙倍邊距問題
對一個div設(shè)置了float:left 和 margin-left:100px 那么在ie6中，這個bug就會出現(xiàn),。您只需要多設(shè)置一個display即可,，代碼如下：
java代碼
1.div {float:left;margin:40px;display:inline;}
div {float:left;margin:40px;display:inline;}
7.簡單的導(dǎo)航菜單
在您的設(shè)計中預(yù)設(shè)一個導(dǎo)航欄是非常有益的?？梢宰寗e人對你網(wǎng)頁的主要內(nèi)容有一個大致的了解,。第一次來的xhtml：
java代碼
1.<div id=”navbar”>
2.<ul>
3.<li><a href=”http://www.”>peakflow design</a></li>
4.<li><a href=”http://www.google.com”">google</a></li>
5.<li><a href=”http:///”>zen habits</a></li>
6.</ul>
7.</div>
<div id=”navbar”>
<ul>
<li><a href=”http://www.”>peakflow design</a></li>
<li><a href=”http://www.google.com”">google</a></li>
<li><a href=”http:///”>zen habits</a></li>
</ul>
</div>
css代碼：
java代碼
1.#navbar ul li {display:inline;margin:0 10px 0 0;}
2.#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
3.#navbar ul li a:hover {background:#eee;color:black;}
#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}
8.不使用table的form表單
正如我們現(xiàn)在進行網(wǎng)站設(shè)計的table-free，把重點是放在使用divs上,。不再對表的列和域進行約束,，所以我們需要一些好用的css，在jeddhowden.com 發(fā)現(xiàn)
java代碼
1.xhtml:
2.<form action=”form.php” method=”post”>
3.<fieldset>
4.<legend>personal information</legend>
5.<div>
6.<label for=”first_name”>first name:</label>
7.<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
8.</div>
9.<div>
10.<label for=”last_name”>last name:</label>
11.<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
12.</div>
13.<div>
14.<label for=”postal”>zip/postal code:</label>
15.<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
16.</div>
17.</fieldset>
18.</form>
xhtml:
<form action=”form.php” method=”post”>
<fieldset>
<legend>personal information</legend>
<div>
<label for=”first_name”>first name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
</div>
<div>
<label for=”last_name”>last name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
</div>
<div>
<label for=”postal”>zip/postal code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
</div>
</fieldset>
</form>
java代碼
1.css:
2.form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
3.form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}
css:
form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}
9.讓footer總是停留在頁面的底部
在網(wǎng)頁的底部總是保留著公司的版本信息,，如何是這部分信息來實現(xiàn)呢,？這是一個很古老的技術(shù)，這都要歸功于the man in blue ,。
java代碼
1.xhtml：
2.<body>
3.<div id=”nonfooter”>
4.<div id=”content”> *place all page content here* </div>
5.</div>
6.<div id=”footer”> *place anything you want in your footer here*
7.</div>
8.</body>
xhtml：
<body>
<div id=”nonfooter”>
<div id=”content”> *place all page content here* </div>
</div>
<div id=”footer”> *place anything you want in your footer here*
</div>
</body>
java代碼
1.css:
2.html, body { height: 100%; }
3.#nonfooter { position: relative; min-height: 100%; }
4.* html #nonfooter { height: 100%; }
5.#content { padding-bottom: 9em; }
6.#footer { position: relative; margin-top: -7.5em; }
css:
html, body { height: 100%; }
#nonfooter { position: relative; min-height: 100%; }
* html #nonfooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }
10.在同一元素上使用多種類
隨著有用的功能越來越多的,，大多數(shù)的人都忽略了內(nèi)部css的選擇。一個元素可以套用很多的類,，例如：
java代碼
1..red {color: red;}
2..bold {font-weight: strong;}
.red {color: red;}
.bold {font-weight: strong;}
我們可以運用它：
java代碼
1.<p class=”red bold”>this text will be red yet also bold!</p>
<p class=”red bold”>this text will be red yet also bold!</p>
