-
-
13390130939售前咨詢(xún)電話 31891684售后服務(wù)電話
13390130939技術(shù)咨詢(xún) 31891684傳真
-
build網(wǎng)站制作 |
【ie6】網(wǎng)頁(yè)排版應(yīng)該考慮IE6的兼容性問(wèn)題當(dāng)前位置：首頁(yè)>主要服務(wù)>網(wǎng)站制作>html 網(wǎng)頁(yè)排版應(yīng)該考慮IE6的兼容性問(wèn)題 IE6占據(jù)百分之40多。雖然瀏覽器的種類(lèi)很多 ，光一個(gè)IE就有IE5.5,IE6,IE7,IE8等多版本 ，在這眾多的高版本中 ，IE6依然受大多數(shù)用戶所喜歡，所以排版時(shí)候就不的不去考慮IE6的兼容問(wèn)題 ，要不然會(huì)損失很多訪問(wèn)者 。 下面列舉IE6中10個(gè)不得不注意的問(wèn)題： 1. 使用 DOCTYPE 你需要在HTML頁(yè)面的最頂部加上DOCTYPE類(lèi)型 ，當(dāng)然， strict版是值得推薦的，例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 或者, XHTML頁(yè)面的!DOCTYPE： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 你最不想看到的是 ，IE6進(jìn)入怪癖模式 – 其實(shí)已經(jīng)夠多怪癖了。
2. 設(shè)置position: relative 設(shè)置position:relative解決了不止一個(gè)問(wèn)題 ，特別當(dāng)需要設(shè)置對(duì)齊的時(shí)候。很明顯，你需要明白的一點(diǎn)是，絕對(duì)定位是相對(duì)來(lái)說(shuō)的。說(shuō)不定，因?yàn)槟銢](méi)有設(shè)置 ，而不知道東西都飛到那去了。比如 ，你設(shè)計(jì)了每篇文章前都有一張圖片，最后 ，你發(fā)現(xiàn) ，只有一張圖片在頁(yè)面上 ，或許，是他們重疊了 。
3. 給浮動(dòng)元素設(shè)置 display:inline 值 這源于著名的IE6雙倍外邊距BUG，例如 ，你給一個(gè)DIV設(shè)計(jì)了浮動(dòng) ，并且 ，設(shè)置了margin-left:5px; ，在IE6中很可能就是margin-left:10px了，這里 ，給浮動(dòng)元素設(shè)置 display:inline； ，即可解決問(wèn)題。
4. 為元素設(shè)置 hasLayout 很多IE6（或IE7）的問(wèn)題可以用設(shè)置hasLayout值的方法來(lái)解決 。（如果你不知道hasLayout是什么，請(qǐng)看這里） 最簡(jiǎn)單的給元素設(shè)置hasLayout值的方法是給加上CSS 的height或width(當(dāng)然 ，zoom也可以用，但這不是CSS的一部分) 。設(shè)置一個(gè)具體的值是推薦的，但有時(shí)候并不一定知道高度多少 ，這里 ，你可能會(huì)用到height:1% 。如果父元素沒(méi)有設(shè)置高度，那么元素的物理高度并不會(huì)改變 ，但是，已經(jīng)具備hasLayout屬性 。
5. 解決字符重復(fù)出現(xiàn)的問(wèn)題 復(fù)雜的布局可能導(dǎo)致一些浮動(dòng)元素里面的文字 ，出現(xiàn)在清理浮動(dòng)位置的下面 。這是一個(gè)奇怪的問(wèn)題，下面這此可以幫你解決： ?確保浮動(dòng)元素設(shè)置了 display:inline; ?在浮動(dòng)元素中使用 margin-right:-3px; ?在浮動(dòng)元素的最后一個(gè)元素后加上一個(gè)IE注釋?zhuān)纾?nbsp;<!--[if !IE]>把你的注釋放這里… <![endif]--> ?在最后的元素中加上一個(gè)DIV(這以設(shè)置width 為90% 或者其他相似的高度) UPDATE: 最簡(jiǎn)單的方法是刪除掉所有注釋 。（感謝恬瑋兒的提示，我自己并沒(méi)有遇到過(guò) ，不過(guò) ，google了一下 ，發(fā)現(xiàn)這個(gè)方法也可以解決 ，并且，這是值得推薦的一個(gè)方法 。） 你可以到positioniseverything.net中查看更多關(guān)于這個(gè)的解釋。
6. 只在<a>標(biāo)簽中使用hover 當(dāng)然，你還是可以通過(guò)JS來(lái)解決這個(gè)方法 7. 使用!important 或高級(jí)選擇器來(lái)區(qū)分IE瀏覽器 比如min-height可以避免使用CSS來(lái)實(shí)現(xiàn)對(duì)IE的兼容 #element { min-height: 20em; height: auto !important; height: 20em; /* 讓IE6顯示這個(gè)高度 */ } IE6 并不能正確地識(shí)別min-height #element { min-height: 20em; height: 20em; } /* 忽略 IE6 */ #element[id] { height: auto; } 8. 避免按比例確定的尺寸 比例會(huì)讓IE6變得錯(cuò)亂 body{ margin: 2% 0 !important; margin: 20px 0; /* IE6 可讀 */ } 9. 盡早測(cè)試，經(jīng)常測(cè)試 別忘記盡早測(cè)試 |
易勢(shì)網(wǎng)站制作
網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽(yáng)易勢(shì)科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營(yíng)銷(xiāo)公司 © 2011 , All rights reserved. 公司地址：沈陽(yáng)市鐵西區(qū)貴和街道建設(shè)中路15號(hào)淺草綠閣商務(wù)樓402室沈陽(yáng)網(wǎng)站制作易勢(shì)最專(zhuān)業(yè)
遼B2-20150173-8
