青青草原综合久久大伊人导航_色综合久久天天综合_日日噜噜夜夜狠狠久久丁香五月_热久久这里只有精品

IE和FIREFOX下CSS的區(qū)別

CSS對瀏覽器器的兼容性具有很高的價值,通常情況下IE和Firefox存在很大的解析差異,這里介紹一下兼容要點。
對高度的解析
IE:將根據(jù)內(nèi)容的高度變化,包括未定義高度的圖片內(nèi)容,即使定義了高度,當(dāng)內(nèi)容超過高度時,將使用實際高度
Firefox:沒有定義高度時,如果內(nèi)容中包括了圖片內(nèi)容,MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn),這樣就會造成和實際內(nèi)容高度不符合的情況;當(dāng)定義了高度,但是內(nèi)容超過高度時,內(nèi)容會超出定義的高度,但是區(qū)域使用的樣式不會變化,造成樣式錯位。

結(jié)論:大家在可以確定內(nèi)容高度的情況下最好定義高度,如果真的沒有辦法定義高度,最好不用使用邊框樣式,否則樣式肯定會出現(xiàn)混亂!

img對象alt和title的解析
alt:當(dāng)照片不存在或者load錯誤時的提示;
title:照片的tip說明。
在IE中如果沒有定義title,alt也可以作為img的tip使用,但是在MF中,兩者完全按照標(biāo)準(zhǔn)中的定義使用

結(jié)論:大家在定義img對象時,最后將alt和title對象都寫全,保證在各種瀏覽器中都能正常使用

其他的細(xì)節(jié)差別
當(dāng)你在寫css的時候,特別是用float: left(或right)排列一竄圖片時,會發(fā)現(xiàn)在firefox里面正常而IE里面有問題。無論你用margin:0,還是border: 0來約束,都無濟于事。

其實這里還有另外一個問題,就是IE對于空格的處理,firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個div結(jié)束后要緊接著一個div寫,中間不要有回車或者空格。不然也許會有問題,比如3px的偏差,而且這個原因很難發(fā)現(xiàn)。

非常不走運的是我又碰到了這樣的問題,多個img標(biāo)簽連著,然后定義的float: left,希望這些圖片可以連起來。但是結(jié)果在firefox里面正常而IE里面顯示的每個img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒有作用。

后來的解決方法是在img外面套li,并且對li定義margin: 0,這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產(chǎn)生很多錯誤問題,只有多多嘗試才能發(fā)現(xiàn)原因。

2、嵌套DIV:父DIV的高度不能根據(jù)子DIV自動變化的解決方案
<div id="parent">
<div id="content"> </div>
</div>

當(dāng)Content內(nèi)容多時,即使parent設(shè)置了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。 解決方案

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

在層的最下方產(chǎn)生一個高度為1的空格,可解除這個問題

3、CSS DIV 學(xué)習(xí)筆記
一、基本上每個區(qū)塊的div 都要有自己的id,杜絕不同功能的區(qū)塊用同一個id/class

二、每個稍大的區(qū)塊div 后面都跟一個<!-- /id -->標(biāo)記開始、結(jié)束

三、隱藏文字的又一種方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地處理并列的兩列:
1)
右列為P, width=44.5%, float=left
左列為P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上兩種方法關(guān)鍵點在于選擇其中一個為float=left

五、隨機的切換圖片:
#random {
BACKGROUND: url(/rotate.php);
}
這個方法很巧妙。

4、關(guān)于div的高度自適應(yīng)
  今天小尿讓我?guī)退捻撟咏鉀Q一個問題,就是div的高度自適應(yīng),也就是在一個父級div中嵌套一左一右兩個子div,右邊的子div內(nèi)容可無限擴展,而可以使得父級div的高度能被無限拉長,用一般的布局方法,在IE中可以正確瀏覽,在Mozilla中父級div的高度就固定在10px左右,無法自適應(yīng)高度,height:auto也不行,怎么辦呢。網(wǎng)上參考到一篇資料,要實現(xiàn)自適應(yīng)高度,div層必須具有float屬性,于是我開始動手試驗,float:left的話,div就跑到頁面最左邊去了,這好辦,我在它的外面再套一層div,把位置定好,那么里面的就算float:left也不會被移動位置了。

xhtml:
==========================================================

<div id="container_father">
  <div id="container">
    <div id="panel"> test<br />
     test<br />
     test<br />
      <!-- id="panel" -->
    </div>
    <div id="sidebar">
     <ul>
       <li class="current">預(yù)安裝檢查</li>
       <li>閱讀 PFC 授權(quán)協(xié)議</li>
       <li>初始化數(shù)據(jù)庫</li>
       <li>完成安裝</li>
      </ul>
      <!-- id="sidebar" -->
    </div>
    <!-- id="container" -->
  </div>
</div>

CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
   width: 750px;
   border: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

FRom: http://ulean.zg163.net/

5、  深入標(biāo)準(zhǔn)  ~  The IE Doubled Float-Margin Bug(IE雙倍浮動邊界Bug)
什么發(fā)生故障?

一段無錯的代碼把一個居左浮動(float:left)的元素放置進一個容器盒(box),并在浮動元素上使用了左邊界(margin-left)來令它和容器的左邊產(chǎn)生一段距離。看起來相當(dāng)?shù)暮唵危瑢幔康敝了辉贗E/Win中瀏覽為止,在瀏覽器中居左浮動元素的邊界長度被神秘地翻了一倍!

情況應(yīng)該如何?

下面的圖釋展示了一個簡單的div(茶色的盒子)包含著一個居左浮動的div(綠色的盒子)。浮動元素有一個100px的左邊界,使容器盒與它的左邊緣之間產(chǎn)生了一個100px的間隙。到現(xiàn)在為止,一直都還不錯。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陳舊的IE“雙倍占據(jù)”

原樣的相同代碼被在IE/Win中瀏覽時以些微不同的方式顯示,下面的圖釋展示了IE/Win在布局上所做的。

這為什么會發(fā)生?別問這種傻問題!這就是IE,記得嗎?符合標(biāo)準(zhǔn)只是理想的狀況,不指望實現(xiàn),這個簡單的事實正驗證了。

重點

這個Bug僅當(dāng)浮動邊界和浮動元素的方向相同時出現(xiàn)在浮動元素和容器盒的內(nèi)邊緣之間,在這之后的任意有著相似邊界的浮動元素不會呈現(xiàn)雙倍邊界。只有特定的浮動行的第一個浮動元素會遭遇這個Bug。像居左的情況一樣,雙倍邊界同樣神秘地顯示在居右的相同方式。

最后,修復(fù)辦法!

直到現(xiàn)在(04年1月)這個Bug一直被認(rèn)為是無法修復(fù)的,通常用來替代錯誤的邊界的控制方法如:一個不可視浮動元素的左邊距,連同一個內(nèi)嵌的盒子一起,可視的盒子裝在不可視浮動元素里;或者使用技巧僅對IE/Win設(shè)定邊界的1/2值。這辦法生效了,但是是混亂的而且搞糟了干凈的源代碼。不過現(xiàn)在全部結(jié)束了。

Steve Clason發(fā)現(xiàn)了一個修復(fù)辦法,描述在他的Guest Demo里,修復(fù)了雙倍邊界和圍繞文字縮進Bug。這是一個經(jīng)典的IE的Bug修復(fù)辦法,使用一個屬性來修復(fù)影響不相關(guān)屬性的Bug。

現(xiàn)在如何來做?

研究它,簡單地將{display: inline;}設(shè)置給浮動元素就是全部所需做的!是的,聽起來太簡單了,不是嗎?不過這是真的,僅僅一個display的"inline"聲明已經(jīng)能夠勝任了。

熟悉規(guī)則的人知道浮動元素自動設(shè)置為"block"元素,而不管他們之前是什么。就如Steve從W3C里指出:

9.5.1 Positioning the float: the 'float' property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right
Same as 'left', but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

這說明浮動元素上的{display: inline;}會被忽略,事實上所有的瀏覽器沒有呈現(xiàn)任何改變,包括IE。但是,它不知何故讓IE停止將浮動元素的邊界翻倍。因而,這個修復(fù)辦法可以被直接應(yīng)用,而沒有任何繁瑣的隱藏方法。如果將來的一款瀏覽器決定對這個修復(fù)辦法抱恙,只要把這個修復(fù)裝入IE獨用的Tan Hack里,細(xì)節(jié)如同IE Three Pixel Text-Jog Demo。

下面是兩個使用了前面相同代碼的生動演示,第一個照常顯示了IE的Bug,下一個對浮動元素使用了"inline"修復(fù)。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

posted on 2007-04-03 10:54 PeakGao 閱讀(237) 評論(0)  編輯 收藏 引用 所屬分類: CSS


只有注冊用戶登錄后才能發(fā)表評論。
網(wǎng)站導(dǎo)航: 博客園   IT新聞   BlogJava   博問   Chat2DB   管理


<2007年4月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

導(dǎo)航

統(tǒng)計

常用鏈接

留言簿(9)

隨筆分類(67)

隨筆檔案(65)

搜索

最新評論

閱讀排行榜

評論排行榜

青青草原综合久久大伊人导航_色综合久久天天综合_日日噜噜夜夜狠狠久久丁香五月_热久久这里只有精品
  • <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>
    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>
            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>
            欧美在线亚洲在线| 国产精品视频网站| 亚洲国产美女| 毛片精品免费在线观看| 久久美女艺术照精彩视频福利播放| 亚洲欧美在线aaa| 久久av一区二区三区亚洲| 久久久999精品| 欧美成在线观看| 亚洲欧洲在线看| 亚洲线精品一区二区三区八戒| 亚洲欧美日韩综合| 美女精品在线观看| 欧美三级视频在线| 国内激情久久| 亚洲视频一区| 久久综合影音| 夜夜嗨网站十八久久| 亚洲男人第一网站| 欧美成人一区二区三区片免费| 欧美成人自拍| 亚洲一区二区3| 欧美成人午夜激情在线| 国产精品一区一区三区| 亚洲区一区二| 久久久久免费视频| 日韩视频免费| 麻豆成人在线| 国产一区二区成人| 亚洲午夜极品| 亚洲国产精品传媒在线观看| 亚洲欧美激情精品一区二区| 欧美精品 日韩| 136国产福利精品导航| 欧美一区二区高清在线观看| 亚洲日本va在线观看| 欧美在线视屏| 国产精品一区二区三区四区| 亚洲精品视频一区| 老司机一区二区三区| 亚洲免费视频一区二区| 欧美精品免费播放| 亚洲国产合集| 男人的天堂亚洲| 欧美在线综合视频| 国产精品一区视频网站| 亚洲一区二区av电影| 亚洲日本欧美日韩高观看| 久久中文字幕一区| 极品少妇一区二区三区| 久久精品亚洲精品| 午夜精品久久久久久久男人的天堂| 欧美人与禽猛交乱配视频| 亚洲精品免费一二三区| 欧美激情第1页| 免费人成精品欧美精品| 亚洲国产cao| 在线一区二区日韩| 亚洲国产婷婷香蕉久久久久久| 久久久久国产精品人| 国产视频久久网| 久久精品国产欧美激情| 亚洲欧美三级伦理| 国产亚洲欧洲| 欧美www视频在线观看| 久久综合狠狠综合久久综合88| 亚洲电影欧美电影有声小说| 你懂的一区二区| 欧美精品www在线观看| 9色国产精品| 亚洲中午字幕| 国内精品福利| 亚洲国产成人av好男人在线观看| 女女同性女同一区二区三区91| 亚洲国产成人91精品| 亚洲高清视频的网址| 麻豆91精品| 欧美成人免费在线视频| 9人人澡人人爽人人精品| 亚洲一区二区免费看| 国产亚洲综合精品| 欧美91大片| 欧美深夜福利| 久久久久9999亚洲精品| 久久蜜臀精品av| 亚洲天堂免费观看| 亚洲欧美精品中文字幕在线| 一区二区在线观看av| 最新日韩欧美| 国产精品视频免费| 欧美成人性生活| 国产精品欧美经典| 亚洲大胆av| 国产精品一区二区男女羞羞无遮挡| 久久久不卡网国产精品一区| 欧美成年人视频网站| 午夜精品一区二区三区在线| 久久精品国内一区二区三区| 日韩午夜视频在线观看| 亚洲欧美国内爽妇网| 亚洲精品一区二区在线观看| 亚洲一区二区三区高清| 亚洲精品1区| 欧美亚洲一区在线| 亚洲天堂av图片| 农夫在线精品视频免费观看| 亚洲欧美一区二区三区久久| 猫咪成人在线观看| 久久精品中文| 国产精品久线观看视频| 亚洲国产精品成人| 一区精品在线播放| 午夜视频一区在线观看| 正在播放亚洲| 欧美不卡激情三级在线观看| 久久久久久久性| 欧美性做爰猛烈叫床潮| 亚洲高清资源综合久久精品| 国产亚洲一区二区三区在线播放| 亚洲老司机av| 亚洲一区中文字幕在线观看| 久久综合网hezyo| 久久国产欧美| 国产精品你懂的| 亚洲午夜日本在线观看| 99re在线精品| 欧美福利视频在线| 欧美激情性爽国产精品17p| 国产在线拍揄自揄视频不卡99| 亚洲婷婷在线| 亚洲欧美精品伊人久久| 欧美日韩久久精品| 亚洲国产欧美在线人成| 欧美一区三区三区高中清蜜桃| 性欧美暴力猛交69hd| 国产精品家教| 亚洲欧美日本伦理| 欧美一级在线视频| 国产精品网曝门| 午夜精品婷婷| 久久九九国产精品怡红院| 国产一区二区精品久久| 欧美在线视频播放| 美女尤物久久精品| 亚洲黄一区二区| 女主播福利一区| 亚洲三级免费观看| 在线亚洲欧美视频| 国产精品毛片| 欧美在线观看视频一区二区三区 | 激情五月***国产精品| 久久se精品一区精品二区| 久久女同精品一区二区| ●精品国产综合乱码久久久久| 美玉足脚交一区二区三区图片| 亚洲国内自拍| 亚洲欧美在线视频观看| 黄色成人免费观看| 嫩模写真一区二区三区三州| 亚洲国产精品激情在线观看| 亚洲视频第一页| 国产午夜精品一区二区三区欧美 | 9l国产精品久久久久麻豆| 欧美日韩中文字幕日韩欧美| 亚洲欧美在线aaa| 国产一区二区成人| 欧美黑人多人双交| 亚洲宅男天堂在线观看无病毒| 久久永久免费| 99国产精品视频免费观看一公开| 欧美性色综合| 久久夜色精品国产| 一区二区三区产品免费精品久久75 | 麻豆视频一区二区| 亚洲午夜小视频| 欧美顶级艳妇交换群宴| 国模私拍一区二区三区| 9i看片成人免费高清| 久久一区二区三区四区| 亚洲午夜在线| 亚洲大胆av| 国产日韩精品一区二区三区在线 | 欧美高清在线精品一区| 亚洲欧美中文另类| 亚洲欧洲综合另类| 国内精品免费在线观看| 国产精品成人一区二区网站软件| 老鸭窝毛片一区二区三区| 亚洲综合不卡| 99国产一区| 亚洲激情第一页| 欧美 日韩 国产一区二区在线视频| 亚洲深夜av| 亚洲精品国产精品国自产观看浪潮| 国产精品揄拍一区二区| 欧美视频在线视频| 欧美久久视频| 欧美国产欧美亚洲国产日韩mv天天看完整 | 久久成人在线| 亚洲影院色无极综合|