CSS在IE和Nascape的顯示差別

2024-01-31    分類： 網(wǎng)站建設(shè)

Web建造者要對(duì)付的最棘手情況之一是：相同的CSS代碼被不同的瀏覽器解釋后會(huì)生成不同的效果。在以前，各種不同的瀏覽器生成極其不同的頁(yè)面是隨處可見(jiàn)的，而現(xiàn)在我們可以用所謂的符合標(biāo)準(zhǔn)的瀏覽器獲得更好的效果。然而，顯示效果的差別還是無(wú)法避免。

當(dāng)前處于領(lǐng)導(dǎo)地位的一些瀏覽器在處理浮動(dòng)效果上就存在著這樣的差別。如果有人想創(chuàng)建一個(gè)能夠隨著瀏覽器窗口的大小變化而動(dòng)態(tài)更改大小多欄的布局，那么這將是一個(gè)特別麻煩的問(wèn)題。

簡(jiǎn)單的沒(méi)有浮動(dòng)的頁(yè)面

假設(shè)你有兩個(gè)div——div#one和div#two，它們都有固定的寬度。如果沒(méi)有浮動(dòng)或者絕對(duì)的定位，這些div就會(huì)以一個(gè)摞在另一個(gè)之上的形式放在瀏覽器窗口的左側(cè)（如例A所示），因?yàn)闃?biāo)準(zhǔn)的頁(yè)面安排順序是從左到右，從上到下，塊級(jí)元素（block-level element）都會(huì)在前一個(gè)元素下面緊接著開(kāi)始一個(gè)新的行。

下面是所有例子都需要的一段HTML：

<body> <div id="one"> Port side text... </div> <div id="two"> Second column text... </div> </body>

下面的CSS代碼用于基本的、不帶浮動(dòng)的版本：

div#one { width: 150px; margin: 0px; background-color: red; } div#two { width: 300px; padding: 0px 10px 5px 10px; 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)制放到包含元素（containing element）的左側(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è)寬度，然后換到下一行，就像段落里的文字那樣排列。

固定寬度的浮動(dòng) 只要div#one和div#two具有固定寬度，而且其總寬度小于瀏覽器窗口的寬度，它們就會(huì)像例B所示的那樣緊挨著排在一起。幾個(gè)大的瀏覽器在處理固定寬度浮動(dòng)的方式上保持著相當(dāng)?shù)囊恢滦?。下面的CSS代碼所生成的頁(yè)面在IE6、Netscape 7、Mozilla 1和Opera 7里顯示出來(lái)是一模一樣的。

div#one { float: left; width: 150px; margin: 0px; background-color: red; } div#two { float: left; width: 300px; padding: 0px 10px 5px 10px; margin: 0px; background-color: silver; }

可變寬度的浮動(dòng)帶來(lái)了可變的結(jié)果 當(dāng)你想把div變成寬度可變的時(shí)候，生成浮動(dòng)效果不一致的問(wèn)題就浮現(xiàn)出來(lái)了。例如，假設(shè)你想要在頁(yè)面的左側(cè)放一個(gè)固定寬度欄，用于導(dǎo)航按鈕的列表，而想在右側(cè)放另外一個(gè)欄，讓它根據(jù)瀏覽器窗口（的大?。┳杂蓴U(kuò)展和收縮。

你可能會(huì)認(rèn)為自己用兩個(gè)左側(cè)浮動(dòng)的div就能實(shí)現(xiàn)這個(gè)效果；一個(gè)是固定寬度的，而另一個(gè)把寬度設(shè)定為自動(dòng)，讓div自動(dòng)調(diào)整大小，這樣它就能夠填補(bǔ)第一個(gè)div和瀏覽器窗口右側(cè)之間的空白。例C就是下面代碼顯示的結(jié)果：

div#one { float: left; width: 150px; margin: 0px; background-color: red; } div#two { float: left; width: auto; padding: 0px 10px 5px 10px; margin: 0px; background-color: silver; }

如果在IE里顯示這個(gè)例子，你會(huì)獲得預(yù)計(jì)的效果，即左邊是固定寬度的欄，緊挨著它右側(cè)的是一個(gè)可變寬度的欄；但是，相同的代碼在其他當(dāng)前流行的瀏覽器上卻會(huì)生成不同的結(jié)果。第二個(gè)div會(huì)掉到第一個(gè)的下面，而不是接著這一行放在右邊。結(jié)果就和不帶浮動(dòng)的頁(yè)面非常類似。

解決方案 要獲得這種兩欄布局，其中一欄能夠自動(dòng)調(diào)整大小的理想效果的一種解決方案是對(duì)第一欄使用浮動(dòng)div，但是要從必須調(diào)整大小的那一欄里把浮動(dòng)刪掉。由于浮動(dòng)欄和普通的文檔安排順序是分離的，所以常規(guī)的div會(huì)被放在上方，但是在浮動(dòng)div的下方。在左邊添加一個(gè)padding，并讓其等于浮動(dòng)div的寬度，而常規(guī)div的內(nèi)容看起來(lái)就會(huì)像是放在左邊div右側(cè)的一個(gè)欄里。例D說(shuō)明了這個(gè)技巧。下面的代碼能夠在當(dāng)前所有的瀏覽器里生成相同的效果。

div#one { float: left; width: 150px; margin: 0px; background-color: red; } div#two { width: auto; padding: 0px 10px 5px 160px; margin: 0px; background-color: silver; }

盡管當(dāng)前Netscape／Mozilla瀏覽器一般都被認(rèn)為要比IE更加符合標(biāo)準(zhǔn)，但是我個(gè)人認(rèn)為IE生成浮動(dòng)元素的效果要比前兩個(gè)瀏覽器更加一致。但是如果不考慮哪一個(gè)生成的效果是“正確的”，那么其差別就會(huì)給Web建造者帶來(lái)最頭疼的問(wèn)題。要避免你的頁(yè)面設(shè)計(jì)出現(xiàn)問(wèn)題，知道瀏覽器生成的效果會(huì)有所不同是第一步，也是最重要的一步。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標(biāo)題：CSS在IE和Nascape的顯示差別
標(biāo)題網(wǎng)址：http://muchs.cn/news21/316371.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)