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

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

firefox下div容器定義height后，div不會因為內(nèi)容超出height而撐大，而i6e下是會被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。下面介紹網(wǎng)頁設(shè)計如何解決兼容性問題，希望對您有所幫助。
1. 文字大小不兼容
同樣14px的宋體字，ie下實際占高16px，下留白3px，firefox下實際占高17px，上留白1px，下留白3px。
文字大小不兼容解決方案： 給所有文字設(shè)定通用line-height值
2.div高度不兼容
firefox下div容器定義height后，div不會因為內(nèi)容超出height而撐大，而i6e下是會被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。
div高度不兼容解決方案：如果設(shè)置高度，需要同時把內(nèi)容物高度限定，也就是溢出隱藏處理：overflow:hidden;或者當(dāng)需要隨著內(nèi)容自適應(yīng)高度，但又想div有一個最小的高度時候，像這樣做min-height: 1400px;max-height:none;_height: 1400px;
3.div寬度不兼容
如果div容器設(shè)定float浮動但沒設(shè)定寬度，那么也會出現(xiàn)ie6和firefox的不兼容。firefox下內(nèi)容會撐開容器滲入它前面的div，ie6下該div內(nèi)容折行而不是我們想象的與同級div在同一行。
div寬度不兼容解決方案：浮動div容器一般需定義width。
4.div浮動不兼容
當(dāng)前面div有左浮動和右浮動，下面div就會受他們影響也有浮動。ie也許不用加清除，但firefox下不清除浮動是不行的。
div浮動不兼容解決方案：給下面的div設(shè)定清除 clear:both;
5. double-margin不兼容
ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數(shù)值的2倍。
解決方案：給浮動容器定義display:inline。
6. mirror margin不兼容
當(dāng)外層元素內(nèi)有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px.padding也會出現(xiàn)類似問題，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復(fù)雜，遠(yuǎn)不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。引申：ff 和ie 下對容器的margin-bottom，padding-bottom的解釋有時不一致，似乎與之相關(guān)。
解決方案：外層元素設(shè)定border 或設(shè)定float。
7.吞吃現(xiàn)象
還是ie6，上下兩個div，上面div設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對應(yīng)上面的背景吞吃現(xiàn)象，還有滾動下邊框缺失的現(xiàn)象。
解決方案：使用zoom:1.這個zoom好象是專門為解決ie6 bug而生的。
8.注釋也能產(chǎn)生bug
多出來的一只豬，這是前人總結(jié)這個bug使用的比喻。ie6下這個bug，大家會在頁面看到豬字出現(xiàn)兩遍，重復(fù)內(nèi)容量因注釋的多少而變。
解決方案：用 picRotate start 方法寫注釋。
網(wǎng)頁設(shè)計必須把握的問題
1、網(wǎng)站的主題規(guī)劃。注意不讓你的網(wǎng)站主題過于分散。因為主題性強的網(wǎng)站，內(nèi)容更集中，網(wǎng)站所有者一般在這方面要投入的精力會更多，所以所提供的信息的質(zhì)量會更高。我們知道，搜索引擎一直致力于提供高質(zhì)量的信息搜索服務(wù)，因此它將提供有價值的信息，網(wǎng)站的排名提前，優(yōu)先返回給用戶。
如果網(wǎng)站覆蓋范圍廣，它還需要保留了許多的主題，那怎么辦?相同原理，只要你的網(wǎng)站信息被安排合理，會形成一個相對集中的主題，那么搜索引擎會給你的網(wǎng)站排名靠前。
2、flash。雖然FLASH有更好的網(wǎng)頁的視覺效果，但搜索引擎不太喜歡，案例表明，這類網(wǎng)站很難被百度搜索引擎索引。提供Flash和非Flash網(wǎng)頁兩種選擇是明智的，這增加了網(wǎng)頁訪問量，又照顧到了搜索引擎的情緒。
3、動態(tài)網(wǎng)頁。任何地址帶?”，“”(和其他類似的符號)的網(wǎng)頁將在門口擋住蜘蛛。這類網(wǎng)頁通常是通過CGI，PHP，ASP和其他程序，更先進(jìn)的技術(shù)，而不是搜索引擎的“蜘蛛”程序。雖然一些主要的搜索引擎(如谷歌)已檢索的動態(tài)網(wǎng)頁的能力。即使它是能夠索引動態(tài)網(wǎng)頁的谷歌，也明確表示，并不能保證所有的動態(tài)網(wǎng)頁都搜索到，除非它是一個非常大的網(wǎng)站，建議還是多使用靜態(tài)網(wǎng)頁等。
4、特效鏈接。經(jīng)?？吹接刑厥庑Ч膶?dǎo)航鏈接，一些網(wǎng)站，比如點擊一個項目將擴大到較低層次的鏈接。這些效果通常通過Java腳本實現(xiàn)，這是一個新的視覺，但在“蜘蛛”程序的眼睛它卻是不那么有吸引力，它不能解釋這種聯(lián)系。為了讓搜索引擎順利檢索到你的網(wǎng)頁，建議或犧牲了一些花哨的東西。
5、充實網(wǎng)站內(nèi)容和網(wǎng)站的受到歡迎程度兩個是相輔相成的，有一個內(nèi)容豐富的網(wǎng)站通常是很受登陸者的歡迎。請注意，這里有著豐富的內(nèi)容，不涉及復(fù)雜的，但涉及內(nèi)容和深度。在該網(wǎng)站的搜索引擎排名，不僅看到了網(wǎng)頁信息的相關(guān)性，同時也會考慮網(wǎng)站的聲望。因此一個內(nèi)容充實的網(wǎng)站會排在前面。不要在網(wǎng)頁設(shè)計中只注重外表美。
6、框架結(jié)構(gòu)。
有些搜索引擎(如FAST)是不支持框架結(jié)構(gòu)的，他們的“蜘蛛”程序無法閱讀這個網(wǎng)頁。
7、圖像塊
除了AltaVista，谷歌和北極光(現(xiàn)已解散的公共搜索服務(wù))明確支持圖像塊連接，其他引擎不支持。當(dāng)“蜘蛛”程序遇到這種結(jié)構(gòu)時，往往覺得不知所措。所以不要設(shè)置圖像鏈接。
網(wǎng)頁設(shè)計常見問題
1. 想不到內(nèi)容的位置
人們使用它們找不到信息，許多網(wǎng)站提供的類別名稱不完整，沒有充分或準(zhǔn)確地描述其中的內(nèi)容，其他的安排是基于公司而不是用戶對內(nèi)容的想法。當(dāng)網(wǎng)站結(jié)構(gòu)不符合用戶的信息組織方式的心理模型(mental models)時，人們無法找到他們需要的東西。
讓用戶參與創(chuàng)建你的網(wǎng)站結(jié)構(gòu)，一些可用性工作(如卡片分類，決策樹或可用性測試)可以在創(chuàng)建一個對用戶有意義的網(wǎng)站結(jié)構(gòu)方面發(fā)揮很大的作用。
ATT.com：有關(guān)舊手機交易的信息是在現(xiàn)有客戶下，但用戶在智能手機下查找。
2. 相互矛盾的連接和導(dǎo)航分類
當(dāng)用戶不能清楚區(qū)分相似的導(dǎo)航類別或鏈接時，他們很難找到恰當(dāng)?shù)膬?nèi)容路徑。類別和鏈接名稱本身需要有自己的涵義，同時也應(yīng)該與站點上的其他選項結(jié)合。如果多個部分或頁面可以滿足特定的信息需求，用戶必須探索每一個路徑或努力做出最好的猜測?；蛘?，他們可能會轉(zhuǎn)向搜索甚至離開網(wǎng)站。
BAM建筑網(wǎng)站上的用戶希望了解建設(shè)項目的細(xì)節(jié)，但不確定這些信息是否屬于關(guān)于我們，公司業(yè)務(wù)，或者公司技術(shù)，大部分是從我們的產(chǎn)品開始，但該部分包含了組織為客戶提供的工作類型的概述，而不是項目細(xì)節(jié)，項目信息和案例研究是我們的技術(shù)特色。
卡片分類和可用性測試有助于避免重疊類別名稱，鏈接太相似的問題通常源于糟糕的內(nèi)容策略。
造成這些問題的兩個可能原因是：
標(biāo)簽相似：鏈接導(dǎo)致內(nèi)容不同，但由于某種原因，它們有相似的標(biāo)簽。如果是這樣的話，試著重命名你的鏈接來區(qū)分它們。
內(nèi)容區(qū)分性差：如果高度信息相關(guān)的鏈接指向不同頁面，解決方案可能不是重命名鏈接，而是重新組織和合并內(nèi)容。
3. 信息孤島
有些站點上的信息比較碎片化，分散在站點上，它們之間幾乎沒有連接。
當(dāng)用戶發(fā)現(xiàn)一個沒有相關(guān)信息的信息孤島時，他們沒有理由認(rèn)為網(wǎng)站的另一個區(qū)域提供了補充材料。如果用戶需要更多的信息，他們會到競爭對手的網(wǎng)站或搜索谷歌。
試圖重新訪問信息的用戶可能最終會選擇在站點的另一個完全不同的領(lǐng)域，對內(nèi)容的看法不同于第一次體驗。那些找出不連貫信息的信息，拼湊起來。無論哪種方式，他們都對網(wǎng)站留下了負(fù)面的印象。
從組織的角度來看，這不僅是用戶體驗的失敗，更是內(nèi)容管理的噩夢：站點的某個區(qū)域的信息可能重復(fù)、不同或甚至與其他地方的信息相矛盾。
解決方案之一是在提供相關(guān)信息的頁面之間添加相關(guān)鏈接，一個更好的解決方案是考慮為什么信息分散在整個網(wǎng)站，挑選適當(dāng)?shù)臅r候，并選擇好位置。站點的其他區(qū)域可以引用關(guān)于該主題內(nèi)容的位置，而不是復(fù)制信息。
4. 重復(fù)鏈接
即使用戶已經(jīng)知道他們所需要信息在網(wǎng)站中的位置，但他們依然可能會遭受意外或者漫長工作流的阻礙。
Web團(tuán)隊經(jīng)常會問，要獲取內(nèi)容需要多少點擊。沒有確切的數(shù)字(no magic number)， 點擊質(zhì)量的重要性要遠(yuǎn)遠(yuǎn)大于其數(shù)量。當(dāng)用戶在點擊頁面時應(yīng)該更接近信息目標(biāo)，用戶在選擇他們想到東西時需要重復(fù)的點擊，這會一次又一次的激怒客戶，并讓他們進(jìn)行了不必要的努力。
團(tuán)隊構(gòu)建頁面有時候會閉門造車，從而沒有考慮到創(chuàng)建內(nèi)容的流程。創(chuàng)建新頁面時，要考慮用戶如何到達(dá)那里并思考是否還有更直接的路徑。
網(wǎng)站性能
性能是網(wǎng)站的一個重要指標(biāo)，除非是沒得選擇(比如只能到 www.12306.cn 這一個網(wǎng)站上買火車票)，否則用戶無法忍受一個響應(yīng)緩慢的網(wǎng)站。一個打開緩慢的網(wǎng)站會導(dǎo)致嚴(yán)重的用戶流失，很多時候網(wǎng)站性能問題是網(wǎng)站架構(gòu)升級優(yōu)化的觸發(fā)器?？梢哉f性能是網(wǎng)站架構(gòu)設(shè)計的一個重要方面，任何軟件架構(gòu)設(shè)計方案都必須考慮可能會帶來的性能問題。
也正是因為性能問題幾乎無處不在，所以優(yōu)化網(wǎng)站性能的手段也非常多，從用戶瀏覽器到數(shù)據(jù)庫，影響用戶請求的所有環(huán)節(jié)都可以進(jìn)行性能優(yōu)化。在瀏覽器端，可以通過瀏覽器緩存、使用頁面壓縮、合理布局頁面、減少 Cookie 傳輸?shù)仁侄胃纳菩阅堋?/div>
還可以使用 CDN，將網(wǎng)站靜態(tài)內(nèi)容分發(fā)至離用戶最近的網(wǎng)絡(luò)服務(wù)商機房，使用戶通過最短訪問路徑獲取數(shù)據(jù)?？梢栽诰W(wǎng)站機房部署反向代理服務(wù)器，緩存熱點文件，加快請求響應(yīng)速度，減輕應(yīng)用服務(wù)器負(fù)載壓力。
在應(yīng)用服務(wù)器端，可以使用服務(wù)器本地緩存和分布式緩存，通過緩存在內(nèi)存中的熱點數(shù)據(jù)處理用戶請求，加快請求處理過程，減輕數(shù)據(jù)庫負(fù)載壓力。也可以通過異步操作將用戶請求發(fā)送至消息隊列等待后續(xù)任務(wù)處理，而當(dāng)前請求直接返回響應(yīng)給用戶。
在網(wǎng)站有很多用戶高并發(fā)請求的情況下，可以將多臺應(yīng)用服務(wù)器組成一個集群共同對外服務(wù)，提高整體處理能力，改善性能。在代碼層面，也可以通過使用多線程、改善內(nèi)存管理等手段優(yōu)化性能。
在數(shù)據(jù)庫服務(wù)器端，索引、緩存、SQL 優(yōu)化等性能優(yōu)化手段都已經(jīng)比較成熟。而方興未艾的 NoSQL 數(shù)據(jù)庫通過優(yōu)化數(shù)據(jù)模型、存儲結(jié)構(gòu)、伸縮特性等手段在性能方面的優(yōu)勢也日趨明顯。
衡量網(wǎng)站性能有一系列指標(biāo)，重要的有響應(yīng)時間、TPS、系統(tǒng)性能計數(shù)器等，通過測試這些指標(biāo)以確定系統(tǒng)設(shè)計是否達(dá)到目標(biāo)。這些指標(biāo)也是網(wǎng)站監(jiān)控的重要參數(shù)，通過監(jiān)控這些指標(biāo)可以分析系統(tǒng)瓶頸，預(yù)測網(wǎng)站容量，并對異常指標(biāo)進(jìn)行報警，保障系統(tǒng)可用性。
對于網(wǎng)站而言，性能符合預(yù)期僅僅是必要條件，因為無法預(yù)知網(wǎng)站可能會面臨的訪問壓力，所以必須要考察系統(tǒng)在高并發(fā)訪問情況下，超出負(fù)載設(shè)計能力的情況下可能會出現(xiàn)的性能問題。網(wǎng)站需要長時間持續(xù)運行，還必須保證系統(tǒng)在持續(xù)運行且訪問壓力不均勻的情況下保持穩(wěn)定的性能特性。

當(dāng)前文章：網(wǎng)頁設(shè)計如何解決兼容性問題
網(wǎng)址分享：http://muchs.cn/news/41686.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、網(wǎng)站營銷、網(wǎng)站建設(shè)、Google

廣告

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