2010-12-24
做網(wǎng)站時(shí)DIV+CSS設(shè)計(jì)要注意的問題
1、css 命名不能帶下劃線開頭,不然ie6某些版本不識(shí)別。如 <div class="_box"></div>.
2、IE6 下 DIV 小高度不能為 0 或小于12 的解決方法。
在網(wǎng)頁布局時(shí)常會(huì)用到 DIV 來顯示一些邊角背景,需要設(shè)置較小的高度,默認(rèn)情況下,IE6 中設(shè)置 DIV 較小高度會(huì)不起作用,在 IE7、FF 等瀏覽器不存在這個(gè)問題。
IE6 下默認(rèn)的字體尺寸大致在 12 - 14px 之間,當(dāng)你試圖定義一個(gè)高度小于這個(gè)默認(rèn)值的 DIV 的時(shí)候, IE6 會(huì)固執(zhí)的認(rèn)為這個(gè)層的高度不應(yīng)該小于字體的行高。所以即使你用 height:5px; 來定義了一個(gè) DIV 的高度,實(shí)際在 IE6 下顯示的仍然是一個(gè) 12px 左右高度的層。
要解決這個(gè)問題,可以強(qiáng)制定義該 DIV 的字體尺寸,或者定義 overflow 屬性來限制 DIV 高度的自動(dòng)調(diào)整。比如:
<div style="height: 5px; font: 0px Arial; line-height:0;"></div>
或者
<div style="height: 5px; overflow: hidden;"></div>
值得注意的是,設(shè)置 font-size:0 時(shí)這個(gè)容器的高度小為 2px ,如果要設(shè)置 DIV 高度為 0 或 1px ,則需要使用 overflow:hidden; 來實(shí)現(xiàn)。
3、IE6中用了float:left之后導(dǎo)致margin-left雙倍邊距的BUG解決方法。
4、html中width元素?zé)o效的解決辦法。對(duì)于內(nèi)聯(lián)元素(span,a 或者 display: inline元素),對(duì)于 IE6,如果瀏覽器運(yùn)行于標(biāo)準(zhǔn)兼容模式下,內(nèi)聯(lián)元素會(huì)忽略 width 或 height 屬性,所以設(shè)置 width 或 height 不能在此種情況下令該元素具有 layout。
方法一,
如果設(shè)置display:block,width屬性生效,但是此時(shí)的span跟div一樣了。
如果設(shè)置display:inline-block,則span并列在同行,而且width屬性生效。
元素display屬性的常見值說明:
block:塊對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為塊對(duì)象呈遞,為對(duì)象之后添加新行。
inline:內(nèi)聯(lián)對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞,從對(duì)象中刪除行。
inline-block:將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象,但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)。
non:隱藏對(duì)象。與 visibility 屬性的hidden值不同,其不為被隱藏的對(duì)象保留其物理空間。
解決方法二,如果設(shè)置float:left | right,width屬性生效.
(浮動(dòng))他使得指定元素脫離普通的文檔流而產(chǎn)生的非凡的布局特性。并且FLOAT必需應(yīng)用在塊級(jí)元素之上,也就是說浮動(dòng)并不應(yīng)用于內(nèi)聯(lián)標(biāo)簽。或者換句話來說當(dāng)應(yīng)用了FLOAT那么這個(gè)元素將被指定為塊級(jí)元素。
display:inline屬性與float的區(qū)別
Display:inline;屬性的作用就是使塊級(jí)元素變成行內(nèi)元素,比如p這樣的,設(shè)置inline屬性以后,就會(huì)不再單獨(dú)占據(jù)一行的位置了。不過使用float 屬性頁同樣可以實(shí)現(xiàn)這樣的效果。 (關(guān)于行內(nèi)元素和塊級(jí)元素請(qǐng)看行內(nèi)元素和塊級(jí)元素)
當(dāng)元素設(shè)置成為inline屬性,變成行內(nèi)元素以后,設(shè)置width屬性也就沒有效果了。
看完display:inline對(duì)塊級(jí)元素的影響以后,我們?cè)賮砜纯磃loat對(duì)行內(nèi)元素的影響
也就是當(dāng)行內(nèi)元素設(shè)置float屬性以后,實(shí)際上他已經(jīng)認(rèn)為他是塊級(jí)元素了,可以設(shè)置 width屬性了。
5、頁html中有注釋: <!-- 中間 左邊 ------- --> ie正常,firefox就不正常
解決方案:
注釋內(nèi)容兩邊的“—”一樣長就好了。