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ā)器??梢哉f性能是網(wǎng)站架構(gòu)設(shè)計(jì)的一個(gè)重要方面,任何軟件架構(gòu)設(shè)計(jì)方案都必須考慮可能會(huì)帶來的性能問題。
也正是因?yàn)樾阅軉栴}幾乎無處不在,所以優(yōu)化網(wǎng)站性能的手段也非常多,從用戶瀏覽器到數(shù)據(jù)庫,影響用戶請(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ǎ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),重要的有響應(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://jinyejixie.com/news36/41686.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(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)