日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

怎么讓div+css兼容ie6ie7ie8ie9和FireFoxChrome等瀏覽器( 二 )

云知道


代碼如下:
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是 ， 一定要將xxxx !important 這句放置在另一句之上 ， 上面已經(jīng)提過(guò)
IE7.0出來(lái)了 ， 對(duì)CSS的支持又有新問(wèn)題 。瀏覽器多了 ， 網(wǎng)頁(yè)兼容性更差了 ， 疲于奔命的還是我們 ， 為解決IE7.0的兼容問(wèn)題 ， 找來(lái)了下面這篇文章：
現(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可以這樣：
代碼如下:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; } /* IE7 */
那么在firefox下字體顏色顯示為#333 ， IE6下字體顏色顯示為#666 ， IE7下字體顏色顯示為#999.
-----------------------------
關(guān)于CSS對(duì)各個(gè)瀏覽器兼容已經(jīng)是老生常談的問(wèn)題了, 網(wǎng)絡(luò)上的教程遍地都是.以下內(nèi)容沒(méi)有太多新穎, 純屬個(gè)人總結(jié), 希望能對(duì)初學(xué)者有一定的幫助.
一、CSS HACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.
1, !important
隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
代碼如下:
2, IE6/IE77對(duì)FireFox
* 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" 即可,屢試不爽.
代碼如下:
三、其他兼容技巧
1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!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.
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可以這樣：
代碼如下:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */
那么在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)可以了 。

推薦閱讀