可能原因如下:
成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、磁縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為磁縣等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
1.HTML頁(yè)面編碼與CSS編碼不同(如HTML為gbk,CSS為utf-8)。
2.CSS文件中未指定@charset頭聲明,導(dǎo)致IE默認(rèn)使用頁(yè)面編碼來(lái)解碼CSS文件(DEMO中IE瀏覽器使用gbk來(lái)解碼一個(gè)utf-8的CSS文件)。
3.中文注釋中的漢字為奇數(shù)個(gè)數(shù)時(shí),會(huì)與結(jié)尾的“*/”組合成新的合法字符,導(dǎo)致注釋未能正確關(guān)閉,造成緊跟其后的樣式被自動(dòng)注釋,從而引起樣式失效。
4.不要使用@import url('a.css')。如果使用@import,當(dāng)css文件發(fā)生改動(dòng)時(shí),客戶端IE6將不會(huì)刷新該css。
這是因?yàn)镮E很多方面并沒(méi)有按html和css的標(biāo)準(zhǔn)來(lái)做,它是想搞一套自己的標(biāo)準(zhǔn),結(jié)果證明是失敗的,因此IE(主要是指IE8-)不是標(biāo)準(zhǔn)瀏覽器,很多html5和css3的效果無(wú)法在IE中呈現(xiàn)出來(lái)。
從IE9開(kāi)始,微軟也慢慢回到標(biāo)準(zhǔn)的軌道上來(lái)了,到了IE11就是完全的標(biāo)準(zhǔn)瀏覽器了。
在網(wǎng)站設(shè)計(jì)的時(shí)候,應(yīng)該注意css樣式兼容不同瀏覽器問(wèn)題,特別是對(duì)完全使用DIV CSS設(shè)計(jì)的網(wǎng),就應(yīng)該更注意IE6 IE7 FF對(duì)CSS樣式的兼容,
所有瀏覽器 通用 height: 100px; IE6 專用 _height: 100px; IE6 專用 *height: 100px; IE7 專用 *+height: 100px; IE7、FF 共用 height: 100px !important;
一、CSS HACK
1, !important
隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的HACK.
以下為引用的內(nèi)容:
2, IE6/IE7對(duì)FireFox
以下為引用的內(nèi)容:*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.
注意:*+html 對(duì)IE7的HACK 必須保證HTML頂部有如下聲明:
二、萬(wàn)能 float 閉合
關(guān)于 clear float 的原理可參見(jiàn) [How To Clear Floats Without Structural Markup]將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可
以下為引用的內(nèi)容:
三、其他兼容技巧
1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決) 如width:115px !important;width:120px;padding:5px;
必須注意的是, !important; 一定要在前面。 2, 居中問(wèn)題.1).垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過(guò) vertical-align: middle.( 注意內(nèi)容不要換行.)2).水平居中. margin: 0 auto;(當(dāng)然不是萬(wàn)能)3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見(jiàn)于導(dǎo)航標(biāo)簽)4, FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問(wèn)題.5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見(jiàn)于導(dǎo)航標(biāo)簽和內(nèi)容列表)6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng).7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 IE.
兼容代碼:兼容最推薦的模式。 .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; } *html .submitbutton { margin-top: 21px; } *+html .submitbutton { margin-top: 21px; } 什么是瀏覽器兼容:當(dāng)使用不同的瀏覽器(Firefox IE7 IE6)訪問(wèn)同一個(gè)網(wǎng)站,或者頁(yè)面的時(shí)候,會(huì)出現(xiàn)一些不兼容的問(wèn)題,有的顯示出來(lái)正常,有的顯示出來(lái)不正常,在編寫CSS的時(shí)候會(huì)很惱火,剛修復(fù)了這個(gè)瀏覽器的問(wèn)題,結(jié)果另外一個(gè)瀏覽器卻出了新問(wèn)題。而兼容就是一種辦法,能讓在一個(gè)CSS里面獨(dú)立的寫支持不同瀏覽器的樣式。
最近微軟發(fā)布的IE7瀏覽器的兼容性確實(shí)給一些網(wǎng)頁(yè)制作人員添加了一個(gè)沉重的負(fù)擔(dān),雖然IE7已經(jīng)走向標(biāo)準(zhǔn)化,但還是有許多和FF不同的地方,所以需要用到IE7的兼容。有一點(diǎn)邏輯思想的人都會(huì)知道可以用IE和FF的兼容結(jié)合起來(lái)使用,下面介紹三個(gè)兼容,例如:程序代碼 第一個(gè)兼容,IE FF 所有瀏覽器 公用(其實(shí)也不算是兼容) height:100px; 第二個(gè)兼容 IE6專用 _height:100px; 第三個(gè)兼容 IE6 IE7公用 *height:100px; 介紹完了這三個(gè)兼容了,下面再來(lái)看看如何在一個(gè)樣式里分別給一個(gè)屬性定義IE6 IE7 FF專用的兼容,看下面的代碼,順序不能錯(cuò): 程序代碼 height:100px; *height:120px; _height:150px; 下面簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性: 在FF下,第2、3個(gè)屬性FF不認(rèn)識(shí),所以它讀的是 height:100px; 在IE7下,第三個(gè)屬性IE7不認(rèn)識(shí),所以它讀第1、2個(gè)屬性,又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性,所以IE7最終讀出的是第2個(gè)屬性 *height:120px; 在IE6下,三個(gè)屬性IE6都認(rèn)識(shí),所以三個(gè)屬性都可以讀取,又因?yàn)榈谌齻€(gè)屬性覆蓋掉前2個(gè)屬性,所以IE6最終讀取的是第三個(gè)屬性。
1 針對(duì)firefox ie6 ie7的css樣式現(xiàn)在大部分都是用!important來(lái)hack,對(duì)于ie6和firefox測(cè)試可以正常顯示,但是ie7對(duì)!important可以正確解釋,會(huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示!找到一個(gè)針對(duì)IE7不錯(cuò)的hack方式就是使用“*+html”,現(xiàn)在用IE7瀏覽一下,應(yīng)該沒(méi)有問(wèn)題了。現(xiàn)在寫一個(gè)CSS可以這樣:
以下為引用的內(nèi)容:#1 { color: #333; }* html #1 { color: #666; }*+html #1 { color: #999; }
那么在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css布局中的居中問(wèn)題主要的樣式定義如下:
body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }說(shuō)明:首先在父級(jí)元素定義TEXT-ALIGN: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中;對(duì)于IE這樣設(shè)定就已經(jīng)可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要說(shuō)明的是,如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中,建議不要套在一個(gè)DIV里,你可以依次拆出多個(gè)div,只要在每個(gè)拆出的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 浮動(dòng)ie產(chǎn)生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline; //使浮動(dòng)忽略}這里細(xì)說(shuō)一下block,inline兩個(gè)元素,Block元素的特點(diǎn)是:總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);
#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的的效果 diplay:table;
IE不認(rèn)得min-這個(gè)定義,但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了,如果只用寬度和高度,正常的瀏覽器里這兩個(gè)值就不會(huì)變,如果只用min-width和min-height的話,IE下面根本等于沒(méi)有設(shè)置寬度和高度。比如要設(shè)置背景圖片,這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題,可以這樣:#box{ width: 80px; height: 35px;}htmlbody #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁(yè)面的最小寬度
min-width是個(gè)非常方便的CSS命令,它可以指定元素最小也不能小于某個(gè)寬度,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè),而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用,可以把一個(gè)
放到標(biāo)簽下,然后為div指定一個(gè)類:然后CSS這樣設(shè)計(jì):#container{ min-width: 600px; width:expression_r(document.body.clientWidth 600? “600px”: “auto” );}第一個(gè)min-width是正常的;但第2行的width使用了Javascript,這只有IE才認(rèn)得,這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。
7 清除浮動(dòng)
.hackbox{ display:table; //將對(duì)象作為塊元素級(jí)的表格顯示}或者.hackbox{ clear:both;}或者加入:after(偽對(duì)象),設(shè)置在對(duì)象后發(fā)生的內(nèi)容,通常和content配合使用,IE不支持此偽對(duì)象,非Ie 瀏覽器支持,所 以并不影響到IE/WIN瀏覽器。這種的最麻煩的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮動(dòng)IE文本產(chǎn)生3象素的bug
左邊對(duì)象浮動(dòng),右邊采用外補(bǔ)丁的左邊距來(lái)定位,右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關(guān)鍵}HTML代碼
9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)
p[id]{}div[id]{}這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
10 IE捉迷藏的問(wèn)題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接,DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。有些內(nèi)容顯示不出來(lái),當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。解決辦法:對(duì)#layout使用line-height屬性 或者給#layout使用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。
11 高度不適應(yīng) 高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié),特別是當(dāng)內(nèi)層對(duì)象使用 margin 或paddign 時(shí)。例:
p對(duì)象中的內(nèi)容
CSS: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解決方法:在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼:.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。 屏蔽IE瀏覽器(也就是IE下不顯示) *:lang(zh) select {font:12px !important;} select:empty {font:12px !important;} 這里select是選擇符,根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。 僅IE7識(shí)別 *+html {…} 當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)兼容。 IE6及IE6以下識(shí)別 * html {…} 這個(gè)地方要特別注意很多地主都寫了是IE6的兼容其實(shí)IE5.x同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別。 html body select {……} 這句與上一句的作用相同。 僅IE6不識(shí)別 select { display :none;} 這里主要是通過(guò)CSS注釋分開(kāi)一個(gè)屬性與值,流釋在冒號(hào)前。 僅IE6與IE5不識(shí)別 select { display :none;} 這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。 僅IE5不識(shí)別 select { display:none;} 這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別 盒模型解決方法 selct {width:IE5.x寬度; voice-family :""}""; voice-family:inherit; width:正確寬度;} 盒模型的清除方法不是通過(guò)!important來(lái)處理的。這點(diǎn)要明確。 清除浮動(dòng) select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中,當(dāng)子級(jí)都為浮動(dòng)時(shí),那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí),那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來(lái)對(duì)父級(jí)做一次定義,那么就可以解決這個(gè)問(wèn)題 。 截字省略號(hào) select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } 這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字,并以省略號(hào)結(jié)尾,很好的一個(gè)技術(shù)。只是目前Firefox并不支持。 只有Opera識(shí)別 @media all and (min-width: 0px){ select {……} } 針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。 以上都是寫CSS中的一些兼容,建議遵循正確的標(biāo)簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系),這樣可以減少你使用兼容的頻率,不要進(jìn)入理解誤區(qū),并不是一個(gè)頁(yè)面就需要很多的兼容來(lái)保持多瀏覽器兼容),很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好,這些都是用來(lái)解決局部的兼容性問(wèn)題,如果希望把兼容性的內(nèi)容也分離出來(lái),不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫在CSS中通過(guò)過(guò)濾器導(dǎo)入特別的樣式,也有的是寫在HTML中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。 IE5.x的過(guò)濾器,只有IE5.x可見(jiàn) @media tty { i{content:"";}} @import ’ie5win.css’; IE5/MAC的過(guò)濾器,一般用不著 下面是IE的條件注釋,個(gè)人覺(jué)得用條件注釋調(diào)用相應(yīng) 兼容是比較完美的多瀏覽器兼容的解決辦法。把需要兼容的地方單獨(dú)放到一個(gè)文件里面,當(dāng)瀏覽器版本符合的時(shí)候就可以調(diào)用那個(gè)被兼容的樣式,這樣不僅使用起來(lái)非常方便,而且對(duì)于制作這個(gè)CSS本身來(lái)講,可以更嚴(yán)格的觀察到是否有必要使用兼容,很多情況下,當(dāng)我本人寫CSS如果把全部代碼包括兼容都寫到一個(gè)CSS文件的時(shí)候的時(shí)候會(huì)很隨意,想怎么兼容就怎么兼容,而你獨(dú)立出來(lái)寫的時(shí)候,你就會(huì)不自覺(jué)的考慮是否有必要兼容,是先兼容 CSS?還是先把主CSS里面的東西調(diào)整到盡可能的不需要兼容?當(dāng)你僅用很少的兼容就讓很多瀏覽器很乖很聽(tīng)話的時(shí)候,你是不是很有成就感呢?你知道怎么選擇了吧~~呵呵 IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋 Only IE 所有的IE可識(shí)別 只有IE5.0可以識(shí)別 Only IE 5.0+ IE5.0包換IE5.5都可以識(shí)別 僅IE6可識(shí)別 Only IE 7/- IE6以及IE6以下的IE5.x都可識(shí)別 Only IE 7/- 僅IE7可識(shí)別 Css 當(dāng)中有許多的東西不按照某些規(guī)律來(lái)的話,會(huì)讓你很心煩,雖然你可以通過(guò)很多的兼容,很多的!important 來(lái)控制它,但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心,看看許多優(yōu)秀的網(wǎng)站,他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運(yùn)行起來(lái)完美無(wú)缺是不是很羨慕?而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實(shí)你要知道IE 和 Firefox 并不不是那么的不和諧,我們找到一定的方法,是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法,你就掌握了一切,我們并不是兼容的奴隸。 div ul li 的嵌套順序 今天只講一個(gè)規(guī)則。就是三角關(guān)系。就是在最外面,里面是,而不用的時(shí)候,你會(huì)發(fā)現(xiàn)你的間隙十分難控制,一般情況下,IE6和IE7會(huì)憑空多一些間距。但很多情況你來(lái)到下一行,間隙就沒(méi)了,但是前面的內(nèi)容又空了很大一塊,出現(xiàn)這種情況雖然你可以改變IE的Margin,然后調(diào)整Firefox下面的Padding,以便使得兩者顯示起來(lái)得效果很相似,但是你得CSS將變得臭長(zhǎng)無(wú)比,你不得不多考慮更多可能出現(xiàn)這種問(wèn)題補(bǔ)救措施,雖然你知道千篇一律來(lái)兼容它們,但是你會(huì)煩得要命。
具體嵌套寫法
遵循上面得嵌套方式,然后在CSS 里面告訴 ul {Margin:0px;Padding:0px;list-style:none;},其中l(wèi)ist-style:none是不讓
標(biāo)記的最前方顯示圓點(diǎn)或者數(shù)字等目錄類型的標(biāo)記,因?yàn)镮E和Firefox顯示出來(lái)默認(rèn)效果有些不一樣。因此這樣不需要做任何手腳,你的IE6、和IE7、Firefox顯示出來(lái)的東西(外距,間距,高度,寬度)就幾乎沒(méi)什么區(qū)別了,也許細(xì)心的你會(huì)在某一個(gè)時(shí)刻發(fā)現(xiàn):兩個(gè)象素的差別,但那已經(jīng)很完美了,不需要你通過(guò)調(diào)整大片的CSS來(lái)控制它們的顯示了,你愿意,你可以僅僅兼容一兩個(gè)地方,而且通常這種兼容可以適應(yīng)各種地方,不需要你重復(fù)在不同的地方調(diào)試不同的兼容方式–減輕你的煩。你可以u(píng)l.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,而統(tǒng)一兼容。嘗試一下吧,再也不要亂嵌套了,雖然在Div+CSS的方式下你幾乎可以想怎么嵌套就怎么嵌套,但是按照上面的規(guī)律你將輕松很多,從而事半功倍!
六、CSS兼容要點(diǎn)分析IE vs FF
CSS 兼容要點(diǎn):
DOCTYPE 影響 CSS 處理
FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行
FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width
FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式
div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字,就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀, hand 僅 IE 可以
FF: 鏈接加邊框和背景色,需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格XHTML+CSS兼容性解決方案小集
使用XHTML+CSS構(gòu)架好處不少,但也確實(shí)存在一些問(wèn)題,不論是因?yàn)槭褂貌皇炀氝€是思路不清晰,我就先把一些我遇到的問(wèn)題寫在下面,省的大家四處找^^
1、在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法:
div{margin:30px!important;margin:28px;}
注意這兩個(gè)margin的順序一定不能寫反,據(jù)阿捷的說(shuō)法!important這個(gè)屬性IE不能識(shí)別,但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣:
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行,所以不可以只寫margin:XXpx!important;
2、IE5 和IE6的BOX解釋不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px,而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來(lái)計(jì)算的。這時(shí)可以做如下修改
div{width:300px!important;width :340px;margin:0 10px 0 10px}
3、ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義
ul{margin:0;padding:0;}
就能解決大部分問(wèn)題。
4、關(guān)于腳本,在xhtml1.1中不支持language屬性,只需要把代碼改為
type=”text/java”
就可以了
七、10個(gè)你未必知道的CSS技巧
1、CSS字體屬性簡(jiǎn)寫規(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)繉懙揭恍猩先ィ?/p>
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
2、同時(shí)使用兩個(gè)類
一般只能給一個(gè)元素設(shè)定一個(gè)類(Class),但這并不意味著不能用兩個(gè)。事實(shí)上,你可以這樣:
…
同時(shí)給P元素兩個(gè)類,中間用空格格開(kāi),這樣所有text和side兩個(gè)類的屬性都會(huì)加到P元素上來(lái)。如果它們兩個(gè)類中的屬性有沖突的話,后設(shè)置的起作用,即在CSS文件中放在后面的類的屬性起作用。
補(bǔ)充:對(duì)于一個(gè)ID,不能這樣寫
…
也不能這樣寫
3、CSS border的缺省值
通??梢栽O(shè)定邊界的顏色,寬度和風(fēng)格,如:
border: 3px solid #000
這位把邊界顯示成3像素寬,黑色,實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。
如果只指定了風(fēng)格,其他屬性就會(huì)使用缺省值。一般地,Border的寬度缺省是medium,一般等于3到4個(gè)像素;缺省的顏色是其中文字的顏色。如果這個(gè)值正好合適的話,就不用設(shè)那么多了。
4、CSS用于文檔打印
許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本,但實(shí)際上這并不需要,因?yàn)榭梢杂肅SS來(lái)設(shè)定打印風(fēng)格。
也就是說(shuō),可以為頁(yè)面指定兩個(gè)CSS文件,一個(gè)用于屏幕顯示,一個(gè)用于打印:
第1行就是顯示,第2行是打印,注意其中的media屬性。
但應(yīng)該在打印CSS中寫什么東西呢?你可以按設(shè)計(jì)普通CSS的方法來(lái)設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)CSS設(shè)成顯示CSS來(lái)檢查它的效果。也許你會(huì)使用 display: none 這個(gè)命令來(lái)關(guān)掉一些裝飾圖片,再關(guān)掉一些導(dǎo)航按鈕。