第頁網(wǎng)頁設(shè)計(jì)如何解決兼容性問題網(wǎng)頁〔制定〕如何解決兼容性問題

firefox下div容器定義height后，div不會(huì)因?yàn)閮?nèi)容超出height而撐大，而i6e下是會(huì)被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。下面介紹網(wǎng)頁制定如何解決兼容性問題，希望對(duì)您有所幫助。

1.文字大小不兼容

同樣14px的宋體字，ie下實(shí)際占高16px，下留白3px，firefox下實(shí)際占高17px，上留白1px，下留白3px。

文字大小不兼容解決方案：給所有文字設(shè)定通用line-height值

2.div高度不兼容

firefox下div容器定義height后，div不會(huì)因?yàn)閮?nèi)容超出height而撐大，而i6e下是會(huì)被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。

div高度不兼容解決方案：如果設(shè)置高度，必須要同時(shí)把內(nèi)容物高度限定，也就是溢出隱藏處理：overflow:hidden;或者當(dāng)必須要隨著內(nèi)容自適應(yīng)高度，但又想div有一個(gè)最小的高度時(shí)候，像這樣做min-height:1400px;max-height:none;_height:1400px;

3.div寬度不兼容

如果div容器設(shè)定float浮動(dòng)但沒設(shè)定寬度，那么也會(huì)出現(xiàn)ie6和firefox的不兼容。firefox下內(nèi)容會(huì)撐開容器滲入它前面的div，ie6下該div內(nèi)容折行而不是我們想象的與同級(jí)div在同一行。

div寬度不兼容解決方案：浮動(dòng)div容器一般必須定義width。

4.div浮動(dòng)不兼容

當(dāng)前面div有左浮動(dòng)和右浮動(dòng)，下面div就會(huì)受他們影響也有浮動(dòng)。ie或許不用加清除，但firefox下不清除浮動(dòng)是不行的。

div浮動(dòng)不兼容解決方案：給下面的div設(shè)定清除clear:both;

5.double-margin不兼容

ie6下給浮動(dòng)容器定義margin-left或者margin-right實(shí)際效果是數(shù)值的2倍。

解決方案：給浮動(dòng)容器定義display:inline。

6.mirrormargin不兼容

當(dāng)外層元素內(nèi)有float元素時(shí)，外層元素如定義margin-top:14px，將自動(dòng)生成margin-bottom:14px.padding也會(huì)出現(xiàn)類似問題，都是ie6下的特產(chǎn)，該類bug出現(xiàn)的狀況較為復(fù)雜，遠(yuǎn)不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。引申：ff和ie下對(duì)容器的margin-bottom，padding-bottom的解釋有時(shí)不一致，似乎與之相關(guān)。

解決方案：外層元素設(shè)定border或設(shè)定float。

7.吞吃現(xiàn)象

還是ie6，上下兩個(gè)div，上面div設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的div也有了背景，這就是吞吃現(xiàn)象。對(duì)應(yīng)上面的背景吞吃現(xiàn)象，還有滾動(dòng)下邊框缺失的現(xiàn)象。

解決方案：使用zoom:1.這個(gè)zoom好象是專門為解決ie6bug而生的。

8.解釋也能產(chǎn)生bug

多出來的一只豬，這是前人總結(jié)這個(gè)bug使用的比喻。ie6下這個(gè)bug，大家會(huì)在頁面看到豬字出現(xiàn)兩遍，重復(fù)內(nèi)容量因解釋的多少而變。

解決方案：用picRotatestart方法寫解釋。

網(wǎng)頁制定必須把握的問題

1、網(wǎng)站的主題規(guī)劃。注意不讓你的網(wǎng)站主題過于分散。因?yàn)橹黝}性強(qiáng)的網(wǎng)站，內(nèi)容更集中，網(wǎng)站所有者一般在這方面要投入的精力會(huì)更多，所以所提供的信息的質(zhì)量會(huì)更高。我們知道，搜索引擎一直致力于提供高質(zhì)量的信息搜索服務(wù)，因此它將提供有價(jià)值的信息，網(wǎng)站的排名提前，優(yōu)先返回給用戶。

如果網(wǎng)站覆蓋范圍廣，它還必須要保留了許多的主題，那怎么辦?相同原理，只要你的網(wǎng)站信息被安排合理，會(huì)形成一個(gè)相對(duì)集中的主題，那么搜索引擎會(huì)給你的網(wǎng)站排名靠前。

2、flash。雖然FLASH有更好的網(wǎng)頁的視覺效果，但搜索引擎不太喜愛，案例說明，這類網(wǎng)站很難被百度搜索引擎索引。提供Flash和非Flash網(wǎng)頁兩種選擇是明智的，這增加了網(wǎng)頁訪問量，又照顧到了搜索引擎的情緒。

3、動(dòng)態(tài)網(wǎng)頁。任何地址帶?'，"'(和其他類似的符號(hào))的網(wǎng)頁將在門口擋住蜘蛛。這類網(wǎng)頁通常是通過CGI，PHP，ASP和其他程序，更先進(jìn)的技術(shù)，而不是搜索引擎的"蜘蛛'程序。雖然一些主要的搜索引擎(如谷歌)已檢索的動(dòng)態(tài)網(wǎng)頁的能力。即使它是能夠索引動(dòng)態(tài)網(wǎng)頁的谷歌，也明確表示，并不能確保所有的動(dòng)態(tài)網(wǎng)頁都搜索到，除非它是一個(gè)非常大的網(wǎng)站，建議還是多使用靜態(tài)網(wǎng)頁等。

4、特效鏈接。常?？吹接刑貏e效果的導(dǎo)航鏈接，一些網(wǎng)站，比如點(diǎn)擊一個(gè)項(xiàng)目將擴(kuò)展到較低層次的鏈接。這些效果通常通過Java腳本實(shí)現(xiàn)，這是一個(gè)新的視覺，但在"蜘蛛'程序的眼睛它卻是不那么有吸引力，它不能解釋這種聯(lián)系。為了讓搜索引擎順利檢索到你的網(wǎng)頁，建議或犧牲了一些花哨的東西。

5、充實(shí)網(wǎng)站內(nèi)容和網(wǎng)站的受到歡迎程度兩個(gè)是相輔相成的，有一個(gè)內(nèi)容豐富的網(wǎng)站通常是很受登陸者的歡迎。請(qǐng)注意，這里有著豐富的內(nèi)容，不涉及復(fù)雜的，但涉及內(nèi)容和深度。在該網(wǎng)站的搜索引擎排名，不僅看到了網(wǎng)頁信息的相關(guān)性，同時(shí)也會(huì)合計(jì)網(wǎng)站的聲望。因此一個(gè)內(nèi)容充實(shí)的網(wǎng)站會(huì)排在前面。不要在網(wǎng)頁制定中只注重外表美。

6、框架結(jié)構(gòu)。

有些搜索引擎(如FAST)是不支持框架結(jié)構(gòu)的，他們的"蜘蛛'程序無法閱讀這個(gè)網(wǎng)頁。

7、圖像塊

除了AltaVista，谷歌和北極光(現(xiàn)已解散的公共搜索服務(wù))明確支持圖像塊連接，其他引擎不支持。當(dāng)"蜘蛛'程序碰到這種結(jié)構(gòu)時(shí)，往往覺得不知所措。所以不要設(shè)置圖像鏈接。

網(wǎng)頁制定常見問題

1.想不到內(nèi)容的位置

人們使用它們找不到信息，許多網(wǎng)站提供的類別名稱不完整，沒有充分或準(zhǔn)確地描述其中的內(nèi)容，其他的安排是基于公司而不是用戶對(duì)內(nèi)容的想法。當(dāng)網(wǎng)站結(jié)構(gòu)不符合用戶的信息組織方式的心理模型(mentalmodels)時(shí)，人們無法找到他們必須要的東西。

讓用戶參加創(chuàng)建你的網(wǎng)站結(jié)構(gòu)，一些可用性工作(如卡片分類，決策樹或可用性測(cè)試)可以在創(chuàng)建一個(gè)對(duì)用戶有意義的網(wǎng)站結(jié)構(gòu)方面發(fā)揮很大的作用。

ATT：有關(guān)舊手機(jī)交易的信息是在現(xiàn)有客戶下，但用戶在智能手機(jī)下查找。

2.互相矛盾的連接和導(dǎo)航分類

當(dāng)用戶不能清楚區(qū)分相似的導(dǎo)航類別或鏈接時(shí)，他們很難找到恰當(dāng)?shù)膬?nèi)容路徑。類別和鏈接名稱本身必須要有自己的涵義，同時(shí)也應(yīng)該與站點(diǎn)上的其他選項(xiàng)結(jié)合。如果多個(gè)部分或頁面可以滿足特定的信息必須求，用戶必須探究每一個(gè)路徑或努力做出最好的推測(cè)。或者，他們可能會(huì)轉(zhuǎn)向搜索甚至離開網(wǎng)站。

BAM建筑網(wǎng)站上的用戶希望了解建設(shè)項(xiàng)目的細(xì)節(jié)，但不確定這些信息是否屬于關(guān)于我們，公司業(yè)務(wù)，或者公司技術(shù)，大部分是從我們的產(chǎn)品開始，但該部分包涵了組織為客戶提供的工作類型的概述，而不是項(xiàng)目細(xì)節(jié)，項(xiàng)目信息和案例研究是我們的技術(shù)特色。

卡片分類和可用性測(cè)試有助于避免堆疊類別名稱，鏈接太相似的問題通常源于糟糕的內(nèi)容策略。

造成這些問題的兩個(gè)可能原因是：

標(biāo)簽相似：鏈接導(dǎo)致內(nèi)容不同，但由于某種原因，它們有相似的標(biāo)簽。如果是這樣的話，試著重命名你的鏈接來區(qū)分它們。

內(nèi)容區(qū)分性差：如果高度信息相關(guān)的鏈接指向不同頁面，解決方案可能不是重命名鏈接，而是重新組織和合并內(nèi)容。

3.信息孤島

有些站點(diǎn)上的信息比較碎片化，分散在站點(diǎn)上，它們之間幾乎沒有連接。

當(dāng)用戶發(fā)現(xiàn)一個(gè)沒有相關(guān)信息的信息孤島時(shí)，他們沒有理由認(rèn)為網(wǎng)站的另一個(gè)區(qū)域提供了補(bǔ)充材料。如果用戶必須要更多的信息，他們會(huì)到競爭對(duì)手的網(wǎng)站或搜索谷歌。

試圖重新訪問信息的用戶可能最終會(huì)選擇在站點(diǎn)的另一個(gè)完全不同的領(lǐng)域，對(duì)內(nèi)容的看法不同于第一次體驗(yàn)。那些找出不連貫信息的信息，拼湊起來。無論哪種方式，他們都對(duì)網(wǎng)站留下了負(fù)面的印象。

從組織的角度來看，這不僅是用戶體驗(yàn)的失敗，更是內(nèi)容〔管理〕的噩夢(mèng)：站點(diǎn)的某個(gè)區(qū)域的信息可能重復(fù)、不同或甚至與其他地方的信息相矛盾。

解決方案之一是在提供相關(guān)信息的頁面之間添加相關(guān)鏈接，一個(gè)更好的解決方案是合計(jì)為什么信息分散在整個(gè)網(wǎng)站，挑選適當(dāng)?shù)臅r(shí)候，并選擇最正確位置。站點(diǎn)的其他區(qū)域可以引用關(guān)于該主題內(nèi)容的位置，而不是復(fù)制信息。

4.重復(fù)鏈接

即使用戶已經(jīng)知道他們所必須要信息在網(wǎng)站中的位置，但他們依舊可能會(huì)遭受意外或者漫長工作流的阻礙。

Web團(tuán)隊(duì)常常會(huì)問，要獲取內(nèi)容必須要多少點(diǎn)擊。沒有確切的數(shù)字(nomagicnumber)，點(diǎn)擊質(zhì)量的重要性要遠(yuǎn)遠(yuǎn)大于其數(shù)量。當(dāng)用戶在點(diǎn)擊頁面時(shí)應(yīng)該更接近信息目標(biāo)，用戶在選擇他們想到東西時(shí)必須要重復(fù)的點(diǎn)擊，這會(huì)一次又一次的激怒客戶，并讓他們進(jìn)行了不必要的努力。

團(tuán)隊(duì)構(gòu)建頁面有時(shí)候會(huì)閉門造車，從而沒有合計(jì)到創(chuàng)建內(nèi)容的流程。創(chuàng)建新頁面時(shí)，要合計(jì)用戶如何到達(dá)那里并思索是否還有更直接的路徑。

網(wǎng)站性能

性能是網(wǎng)站的一個(gè)重要指標(biāo)，除非是沒得選擇(比如只能到.12306.cn這一個(gè)網(wǎng)站上買火車票)，否則用戶無法忍受一個(gè)響應(yīng)緩慢的網(wǎng)站。一個(gè)打開緩慢的網(wǎng)站會(huì)導(dǎo)致嚴(yán)重的用戶流失，很多時(shí)候網(wǎng)站性能問題是網(wǎng)站架構(gòu)升級(jí)優(yōu)化的觸發(fā)器?？梢哉f性能是網(wǎng)站架構(gòu)制定的一個(gè)重要方面，任何軟件架構(gòu)制定方案都必須合計(jì)可能會(huì)帶來的性能問題。

也正是因?yàn)樾阅軉栴}幾乎無處不在，所以優(yōu)化網(wǎng)站性能的手段也非常多，從用戶瀏覽器到數(shù)據(jù)庫，影響用戶請(qǐng)求的所有環(huán)節(jié)都可以進(jìn)行性能優(yōu)化。在瀏覽器端，可以通過瀏覽器緩存、使用頁面壓縮、合理布局頁面、減少Cookie傳輸?shù)仁侄胃纳菩阅堋?/p>

還可以使用CDN，將網(wǎng)站靜態(tài)內(nèi)容分發(fā)至離用戶最近的網(wǎng)絡(luò)服務(wù)商機(jī)房，使用戶通過最短訪問路徑獲取數(shù)據(jù)?？梢栽诰W(wǎng)站機(jī)房布暑反向代理服務(wù)器，緩存熱點(diǎn)文件，加快請(qǐng)求響應(yīng)速度，減輕應(yīng)用服務(wù)器負(fù)載壓力。

在應(yīng)用服務(wù)器端，可以使用服務(wù)器本地緩存和分布式緩存，通過緩存在內(nèi)存中的熱點(diǎn)數(shù)據(jù)處理用戶請(qǐng)求，加快請(qǐng)求處理過程，減輕數(shù)據(jù)庫負(fù)載壓力。也可以通過異步操作將用戶請(qǐng)求發(fā)送至消息隊(duì)列等待后續(xù)任務(wù)處理，而當(dāng)前請(qǐng)求直接返回響應(yīng)給用戶。

在網(wǎng)站有很多用戶高并發(fā)請(qǐng)求的狀況下，可以將多臺(tái)應(yīng)用服務(wù)器組成一個(gè)集群共同對(duì)外服務(wù)，提升整體處理能力，改善性能。在代碼層面，也可以通過使用多線程、改善內(nèi)存管理等手段優(yōu)化性能。

在數(shù)據(jù)庫服務(wù)器端，索引、緩存、SQL優(yōu)化等性能優(yōu)化手段都已經(jīng)比較成熟。而方興未艾的NoSQL數(shù)據(jù)庫通過優(yōu)化數(shù)據(jù)模型、存儲(chǔ)結(jié)構(gòu)、伸縮特性等手段在性能方面的優(yōu)勢(shì)也日趨顯然。

衡量網(wǎng)站性能有一系列指標(biāo)，重要的有響