日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
DIV+CSS在IE6、IE7、Firefox下的使用技巧

DIV+CSS瀏覽器兼容問(wèn)題一直困繞著許多從事DIV＋CSS網(wǎng)頁(yè)排版的美工人員，尤其是IE與火狐的兼容。這里和大家分享一下在IE6、IE7、Firefox下的DIV+CSS網(wǎng)頁(yè)布局的注意問(wèn)題及技巧。

在和靜等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都營(yíng)銷網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),和靜網(wǎng)站建設(shè)費(fèi)用合理。

在IE6、IE7、Firefox下的DIV+CSS網(wǎng)頁(yè)布局的注意問(wèn)題及技巧

DIV+CSS瀏覽器兼容問(wèn)題一直困繞著許多從事DIV＋CSS網(wǎng)頁(yè)排版的美工人員，尤其是IE與火狐的兼容。用DIV+CSS布局的網(wǎng)頁(yè)在IE下顯示一切正常,可是在火狐（FireFox）瀏覽器里打開(kāi)，本來(lái)好好網(wǎng)頁(yè)一下子就全亂了.讓人怎么看?這一定會(huì)影響到你的網(wǎng)站的推廣,seo優(yōu)化,不利于搜所引擎的搜索.所以解決DIV+CSS瀏覽器兼容的問(wèn)題是完全必須的.

下面來(lái)看一下di+css瀏覽器兼容的實(shí)例，區(qū)分IE6，IE7，firefox火狐瀏覽器CSS的寫法先來(lái)分開(kāi)區(qū)分一下。

◆首先聲明DIV+CSS瀏覽器兼容性IE6與IE7與火狐(firefox)的一些識(shí)別規(guī)則：

1.IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如Firefox)不能識(shí)別*；

2.IE6能識(shí)別*，但不能識(shí)別!important,

3.IE7能識(shí)別*，也能識(shí)別!important;

4.firefox不能識(shí)別*，但能識(shí)別!important;

◆請(qǐng)看下簡(jiǎn)單的DIV+CSS瀏覽器兼容實(shí)例:

1．IE6和firefox的區(qū)別：

background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍(lán)色.

2.IE6和IE7的區(qū)別：

background:green!important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色

3.區(qū)別IE7與Firefox：

background:orange;*background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

4.Firefox，IE7，IE6：

background:orange;*background:green!important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍(lán)色.

為了更加清楚的來(lái)表達(dá)說(shuō)明DIV+CSS瀏覽器兼容下面表格是更加清楚的能表達(dá)IE6,IE7,Firefox之間的識(shí)別標(biāo)識(shí)區(qū)別:

                        IE6          IE7          Firefox

              *           √           √            ×

        important   ×           √             √

        _(下劃線)  √            ×               ×

【注：:不管是什么方法，書寫的順序都是Firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面?！?p#

一、CSSHACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.

1、!important

隨著IE7對(duì)!important的支持,!important方法現(xiàn)在只針對(duì)IE6的HACK.【注：注意寫法.記得該聲明位置需要提前.】

2、IE6/IE7對(duì)FireFox

*+html與*html是IE特有的標(biāo)簽,firefox暫不支持.而*+html又為IE7特有標(biāo)簽.

注意:*+html對(duì)IE7的HACK必須保證HTML
頂部有如下聲明：
"http://www.w3.org/TR/html4/loose.dtd">

二、其他的一些技巧

技巧一：

1、Firefox下給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:0auto;(當(dāng)然不是萬(wàn)能)
3、若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式,需要設(shè)置display:block;
(常見(jiàn)于導(dǎo)航標(biāo)簽)
4、Firefox和IE對(duì)BOX理解的差異導(dǎo)致相差2px的還有設(shè)為float的div在ie下margin加倍等問(wèn)題.
5、ul標(biāo)簽在Firefox下面默認(rèn)有l(wèi)ist-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.

技巧二：針對(duì)firefoxie6ie7的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. #1{ 
    2. 
  
  
  
  2. color:#333; 
    3. 
  
  
  
  3. }/*Moz*/ 
    4. 
  
  
  
  4. *html#1{ 
    5. 
  
  
  
  5. color:#666; 
    6. 
  
  
  
  6. }/*IE6*/ 
    7. 
  
  
  
  7. *+html#1{ 
    8. 
  
  
  
  8. color:#999; 
    9. 
  
  
  
  9. }/*IE7*/
    10.

那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。

技巧三：css布局中的居中問(wèn)題

主要的樣式定義如下：

 
 
 
    
  
  
  
  1. body{ 
    2. 
  
  
  
  2. text-align:center; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. #center{ 
    5. 
  
  
  
  5. margin-right:auto; 
    6. 
  
  
  
  6. margin-left:auto; 
    7. 
  
  
  
  7. }
    8.

說(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;就可以了。#p#

技巧四：浮動(dòng)ie產(chǎn)生的雙倍距離

#box{float:left;width:100px;margin:000100px;
//這種情況之下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與寬度和高度的問(wèn)題

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)題，可以這樣：

 
 
 
    
  
  
  
  1. #box{ 
    2. 
  
  
  
  2. width:80px; 
    3. 
  
  
  
  3. height:35px; 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. html>body#box{ 
    6. 
  
  
  
  6. width:auto; 
    7. 
  
  
  
  7. height:auto; 
    8. 
  
  
  
  8. min-width:80px; 
    9. 
  
  
  
  9. min-height:35px; 
    10. 
  
  
  
  10. } 
    11.

 技巧六：頁(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ì)：

 
 
 
    
  
  
  
  1. #container{ 
    2. 
  
  
  
  2. min-width:600px; 
    3. 
  
  
  
  3. width:expression(document.body.clientWidth<
    4. 
  
  
  
  4. 600?"600px":"auto"); 
    5. 
  
  
  
  5. }
    6.

第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。

技巧七：清除浮動(dòng).

 
 
 
    
  
  
  
  1. hackbox{ 
    2. 
  
  
  
  2. display:table;//將對(duì)象作為塊元素級(jí)的表格顯示 
    3. 
  
  
  
  3. }
    4.

或者

 
 
 
    
  
  
  
  1. .hackbox{ 
    2. 
  
  
  
  2. clear:both; 
    3. 
  
  
  
  3. }
    4.

或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對(duì)象，非Ie瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的......

 
 
 
    
  
  
  
  1. #box:after{ 
    2. 
  
  
  
  2. content:"."; 
    3. 
  
  
  
  3. display:block; 
    4. 
  
  
  
  4. height:0; 
    5. 
  
  
  
  5. clear:both; 
    6. 
  
  
  
  6. visibility:hidden; 
    7. 
  
  
  
  7. }
    8.

#p#技巧八：DIV浮動(dòng)

IE文本產(chǎn)生3象素的bug左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.

 
 
 
    
  
  
  
  1. #box{ 
    2. 
  
  
  
  2. float:left; 
    3. 
  
  
  
  3. width:800px; 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. #left{float:left; 
    6. 
  
  
  
  6. width:50%; 
    7. 
  
  
  
  7. }#right{ 
    8. 
  
  
  
  8. width:50%; 
    9. 
  
  
  
  9. } 
    10. 
  
  
  
  10. *html#left{ 
    11. 
  
  
  
  11. margin-right:-3px;//這句是關(guān)鍵} 
    12. 
  
  
  
  12. HTML代碼
    13.

技巧九：屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)

p[id]{}div[id]{}
這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,Firefox和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.

技巧十：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)單。

技巧十一：高度不適應(yīng)

高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin或padding時(shí)。
例：

 
 
 
    
  
  
  
  1. CSS： 
    2. 
  
  
  
  2. #box{ 
    3. 
  
  
  
  3. background-color:#eee; 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. #boxp{ 
    6. 
  
  
  
  6. margin-top:20px; 
    7. 
  
  
  
  7. margin-bottom:20px; 
    8. 
  
  
  
  8. text-align:center; 
    9. 
  
  
  
  9. }
    10.

解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：

 
 
 
    
  
  
  
  1. .1{height:0px;overflow:hidden;}
    2. 
  
  
  
  2.

或者為DIV加上border屬性。


分享標(biāo)題：DIV+CSS在IE6、IE7、Firefox下的使用技巧
瀏覽地址：http://www.dlmjj.cn/article/dhesedp.html