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

2016-08-18    分類： 網(wǎng)站建設(shè)

firefox下div容器定義height后，div不會(huì)因?yàn)閮?nèi)容超出height而撐大，而i6e下是會(huì)被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。下面介紹網(wǎng)頁設(shè)計(jì)如何解決兼容性問題，希望對(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. mirror margin不兼容
當(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好象是專門為解決ie6 bug而生的。
8.注釋也能產(chǎn)生bug
多出來的一只豬，這是前人總結(jié)這個(gè)bug使用的比喻。ie6下這個(gè)bug，大家會(huì)在頁面看到豬字出現(xiàn)兩遍，重復(fù)內(nèi)容量因注釋的多少而變。
解決方案：用 picRotate start 方法寫注釋。
網(wǎng)頁設(shè)計(jì)必須把握的問題
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、特效鏈接。經(jīng)常看到有特殊效果的導(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ì)考慮網(wǎng)站的聲望。因此一個(gè)內(nèi)容充實(shí)的網(wǎng)站會(huì)排在前面。不要在網(wǎng)頁設(shè)計(jì)中只注重外表美。
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)頁設(shè)計(jì)常見問題
1. 想不到內(nèi)容的位置
人們使用它們找不到信息，許多網(wǎng)站提供的類別名稱不完整，沒有充分或準(zhǔn)確地描述其中的內(nèi)容，其他的安排是基于公司而不是用戶對(duì)內(nèi)容的想法。當(dāng)網(wǎng)站結(jié)構(gòu)不符合用戶的信息組織方式的心理模型(mental models)時(shí)，人們無法找到他們需要的東西。
讓用戶參與創(chuàng)建你的網(wǎng)站結(jié)構(gòu)，一些可用性工作(如卡片分類，決策樹或可用性測(cè)試)可以在創(chuàng)建一個(gè)對(duì)用戶有意義的網(wǎng)站結(jié)構(gòu)方面發(fā)揮很大的作用。
ATT.com：有關(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ì)到競(jìng)爭(zhēng)對(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è)更好的解決方案是考慮為什么信息分散在整個(gè)網(wǎng)站，挑選適當(dāng)?shù)臅r(shí)候，并選擇好位置。站點(diǎn)的其他區(qū)域可以引用關(guān)于該主題內(nèi)容的位置，而不是復(fù)制信息。
4. 重復(fù)鏈接
即使用戶已經(jīng)知道他們所需要信息在網(wǎng)站中的位置，但他們依然可能會(huì)遭受意外或者漫長(zhǎng)工作流的阻礙。
Web團(tuán)隊(duì)經(jīng)常會(huì)問，要獲取內(nèi)容需要多少點(diǎn)擊。沒有確切的數(shù)字(no magic number)， 點(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ì)閉門造車，從而沒有考慮到創(chuàng)建內(nèi)容的流程。創(chuàng)建新頁面時(shí)，要考慮用戶如何到達(dá)那里并思考是否還有更直接的路徑。
網(wǎng)站性能
性能是網(wǎng)站的一個(gè)重要指標(biāo)，除非是沒得選擇(比如只能到 www.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ā)器。可以說性能是網(wǎng)站架構(gòu)設(shè)計(jì)的一個(gè)重要方面，任何軟件架構(gòu)設(shè)計(jì)方案都必須考慮可能會(huì)帶來的性能問題。
也正是因?yàn)樾阅軉栴}幾乎無處不在，所以優(yōu)化網(wǎng)站性能的手段也非常多，從用戶瀏覽器到數(shù)據(jù)庫(kù)，影響用戶請(qǐng)求的所有環(huán)節(jié)都可以進(jìn)行性能優(yōu)化。在瀏覽器端，可以通過瀏覽器緩存、使用頁面壓縮、合理布局頁面、減少 Cookie 傳輸?shù)仁侄胃纳菩阅堋?/div>
還可以使用 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ù)庫(kù)負(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ù)庫(kù)服務(wù)器端，索引、緩存、SQL 優(yōu)化等性能優(yōu)化手段都已經(jīng)比較成熟。而方興未艾的 NoSQL 數(shù)據(jù)庫(kù)通過優(yōu)化數(shù)據(jù)模型、存儲(chǔ)結(jié)構(gòu)、伸縮特性等手段在性能方面的優(yōu)勢(shì)也日趨明顯。
衡量網(wǎng)站性能有一系列指標(biāo)，重要的有響應(yīng)時(shí)間、TPS、系統(tǒng)性能計(jì)數(shù)器等，通過測(cè)試這些指標(biāo)以確定系統(tǒng)設(shè)計(jì)是否達(dá)到目標(biāo)。這些指標(biāo)也是網(wǎng)站監(jiān)控的重要參數(shù)，通過監(jiān)控這些指標(biāo)可以分析系統(tǒng)瓶頸，預(yù)測(cè)網(wǎng)站容量，并對(duì)異常指標(biāo)進(jìn)行報(bào)警，保障系統(tǒng)可用性。
對(duì)于網(wǎng)站而言，性能符合預(yù)期僅僅是必要條件，因?yàn)闊o法預(yù)知網(wǎng)站可能會(huì)面臨的訪問壓力，所以必須要考察系統(tǒng)在高并發(fā)訪問情況下，超出負(fù)載設(shè)計(jì)能力的情況下可能會(huì)出現(xiàn)的性能問題。網(wǎng)站需要長(zhǎng)時(shí)間持續(xù)運(yùn)行，還必須保證系統(tǒng)在持續(xù)運(yùn)行且訪問壓力不均勻的情況下保持穩(wěn)定的性能特性。

分享標(biāo)題：網(wǎng)頁設(shè)計(jì)如何解決兼容性問題
鏈接地址：http://muchs.cn/news36/41686.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、ChatGPT、軟件開發(fā)、用戶體驗(yàn)、App開發(fā)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)