IE和Nascape中CSS顯示差別
本文和大家重點(diǎn)討論一下CSS在IE和Nascape的顯示差別，相同的CSS代碼被不同的瀏覽器解釋后會(huì)生成不同的效果，現(xiàn)在我們可以用所謂的符合標(biāo)準(zhǔn)的瀏覽器獲得更好的效果。然而，顯示效果的差別還是無(wú)法避免。
CSS在IE和Nascape的顯示差別
Web建造者要對(duì)付的最棘手情況之一是：相同的CSS代碼被不同的瀏覽器解釋后會(huì)生成不同的效果。在以前，各種不同的瀏覽器生成極其不同的頁(yè)面是隨處可見的，而現(xiàn)在我們可以用所謂的符合標(biāo)準(zhǔn)的瀏覽器獲得更好的效果。然而，顯示效果的差別還是無(wú)法避免。
當(dāng)前處于領(lǐng)導(dǎo)地位的一些瀏覽器在處理浮動(dòng)效果上就存在著這樣的差別。如果有人想創(chuàng)建一個(gè)能夠隨著瀏覽器窗口的大小變化而動(dòng)態(tài)更改大小多欄的布局，那么這將是一個(gè)特別麻煩的問題。
簡(jiǎn)單的沒有浮動(dòng)的頁(yè)面
假設(shè)你有兩個(gè)div——div#one和div#two，它們都有固定的寬度。如果沒有浮動(dòng)或者絕對(duì)的定位，這些div就會(huì)以一個(gè)摞在另一個(gè)之上的形式放在瀏覽器窗口的左側(cè)（如例A所示），因?yàn)闃?biāo)準(zhǔn)的頁(yè)面安排順序是從左到右，從上到下，塊級(jí)元素（block-levelelement）都會(huì)在前一個(gè)元素下面緊接著開始一個(gè)新的行。
下面是所有例子都需要的一段HTML：
- <body>
- <dividdivid="one">
- Portsidetext...
- </div>
- <dividdivid="two">
- Secondcolumntext...
- </div>
- </body>
下面的CSS代碼用于基本的、不帶浮動(dòng)的版本：
- div#one{
- width:150px;
- margin:0px;
- background-color:red;
- }
- div#two{
- width:300px;
- padding:0px10px5px10px;
- margin:0px;
- background-color:silver;
- }
基本的浮動(dòng)
當(dāng)你創(chuàng)建一個(gè)包含有float:left或者float:right屬性的CSS樣式，并把它應(yīng)用到諸如div標(biāo)簽這樣的塊級(jí)元素上的時(shí)候，div就會(huì)從文檔的普通文本安排順序里被刪除，并被強(qiáng)制放到包含元素（containingelement）的左側(cè)或者右側(cè)。如果包含元素是一個(gè)主體標(biāo)簽，那么div就會(huì)浮動(dòng)到瀏覽器窗口的一側(cè)。否則，浮動(dòng)的div就會(huì)移動(dòng)到包含div的邊緣，而以前是不會(huì)這樣的。
如果你有一個(gè)以上的浮動(dòng)元素，那么第二個(gè)和隨后的浮動(dòng)元素會(huì)緊接著***個(gè)排成一條，其排列方式非常像文本里的一行字母。一系列浮動(dòng)元素會(huì)對(duì)齊成一行，直到撐滿瀏覽器窗口的整個(gè)寬度，然后換到下一行，就像段落里的文字那樣排列。
【編輯推薦】
- 十個(gè)不為人知的CSS技巧
- CSS樣式表特點(diǎn)及嵌入網(wǎng)頁(yè)的四種途徑
- 三種方法實(shí)現(xiàn)CSS樣式表插入
- CSS外邊距設(shè)置屬性margin用法
- 探究CSS高級(jí)語(yǔ)法中選擇器分組和CSS繼承用法
