導航:首頁 > 萬維百科 > 網頁設計時怎樣兼容各瀏覽器

網頁設計時怎樣兼容各瀏覽器

發布時間:2021-03-29 15:24:54

1、網頁在設計的時候,應該怎麼考慮不同瀏覽器的兼容

設計是不需要考慮瀏覽器,只有在做成靜態頁面,也就是要給程序員用 就要考慮js css兼容瀏覽器的問題了。最好各個版本的瀏覽器都測試下。如果還有問題就是程序員的問題了 。。

2、網頁設計中如何解決瀏覽器兼容問題?

1. 目標不居中;
一般新手都愛出現這個問題,主要原因是對盒子模型不夠理解,如果發現你的頁面沒有居中,基本上有兩種情況:
a. 如果是在瀏覽器中沒有居中,就是沒盒子,就是要用一個大DIV把所有需要居中元素裝起來,然後給盒子一個css樣式margin:0 auto;
b. 如果想要盒子內的元素居中,必須定義盒子的絕對寬度,然後給盒子一個CSS樣式text-align:center;

2. 目標在不同瀏覽器上的位置不同;
a. 首先不要去急著找hack,先看一下自己的代碼有沒有錯誤,DW里有一個「檢查瀏覽器兼容性」功能特別實用;
b. 然後,盡量讓目標的位置初始化,使之在所有瀏覽器都處在同一個位置,這個條件的前提是,不寫hack,最後再一個方位一個方位調整。

3. 目標與目標之間距離在各個瀏覽器上的區別;
a. 給其中一個目標加背景顏色;
b. 觀察背景色與另外一個目標的距離,查看是不是這個目標造成的距離問題
c. 如果不是上一個目標,那就給另外一個目標也加上背景顏色。
d. 這樣很容易判斷出那個目標造成的原因,就針對那個目標進行修改。

4. IE6兼容問題最多的一個,浮動問題。
a. flaot浮動造成IE6下面雙倍邊距問題,這個最常見,也最好處理,解決方法:
只需要給這個DIV加一個樣式:display:inline;
b. 布局的時候經常會遇到這種情況:發現有一個DIV浮動了,接下來的一個DIV本來是要在下面顯示的,結果跑上面去了,這種情況一般在FF下面會出現。
解決的辦法:清除浮動,在設置過浮動的那個DIV下面加一個DIV,給個樣式clear:both;如下
<div style="float:left;height:100px; width:500px;"> <div style="clear:both;"> <div style="height:100px; width=300px">

5. IE8兼容問題
ie8下兼容問題,這個最好處理,轉化成ie7兼容就可以。在頭部加如下一段代碼,然後只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" />

6. 背景兼容問題
有的時候明明給一個DIV加了背景顏色或背景圖片,但是卻顯示不出來或者顯示不全。
解決辦法:首先,有可能是DIV沒有設置絕對高度。如果設置了寬度和高度還沒有效果,那麼給DIV一個樣式display:block;(通常a:hover加背景的時候經常遇到)。
另外,如果高度必須要設置成自動的話,那麼就給DIV一個樣式overflow:hidden;

7. IE7和Firefox兼容問題
很多朋友DIV+CSS的時候,會出現,在IE的幾個瀏覽器下都好使,就是FF下有問題。
解決方法:height:100px;/*FF下顯示100的高*/ +height:120px;/*IE678下顯示120高*/
原理:FF不識別加過符號的屬性,而IE識別。

3、請問下,網頁設計時,如何處理不同的瀏覽器

基本上所有瀏覽器都可以 除了特殊的網頁 不過特殊的網頁一般有特殊作用

普通網頁不用考慮這些問題

網頁對瀏覽器的兼容是編寫瀏覽器程序的人需要考慮的

編寫網頁只是要求語法格式正確無錯基本上就可以

4、做網頁設計,一般如何保證各瀏覽器顯示效果的兼容性?

從兼容性考慮出發那麼還是使用jquery包,這樣可能兼容性問題都不用考慮了。否則無論js還是css還是會涉及到瀏覽器兼容問題。

5、製作網頁時瀏覽器的兼容性問題

同瀏覽器對HTML標記所具有的內外邊距屬性具有不同的定義。

因此如果想消除這種差距,應該在相應的CSS部分加入以下CSS代碼:

*{margin:0px;padding:0px;}

借於此,所有標記的內外邊距被統一起來。

優先順序問題:對於同一標記屬性所給定的值,有不同的優先順序。其中優先順序最高的是內聯代碼,其實是頁內CSS,接下來是瀏覽器默認設置,最後才是外部CSS所做的限制。

Margin不一致的問題:

當有多張圖片需要排在一行時,通常使用「Float:Left」來實現,這樣一來,瀏覽器就存在兼容性問題。導致圖片與後面的內容存在margin不一致的問題。對此一種解決方法就是給圖片添加「Display:inline」項即可。

DIV居中問題:

通常會利用「vertical-align:middle」來實現,這對於搜狗瀏覽器來說,是正常的,但是對於IE瀏覽器來說,卻並沒有效果。對此,一種較好的解決方法是:將文字的行高設置與DIV一樣時即可解決問題。

內外邊框合並問題。通常情況下,對於兩個相關DIV塊,相鄰時採用外邊距合並原則,其結果只最兩個DIV塊中Margin最大值做為兩個DIV之間的間距。包含的兩個DIV之間的間距也遵行同樣的規則。

掌握了這一規則,在利用DIV塊進行布局時就可以做的更加得心應手。

6、寫html語言,製作網頁,怎麼讓網頁和很多瀏覽器都兼容? 求解!

!! 而且做網頁設計 一定要用 IE 和 火狐 等瀏覽器測試! 發現兼容問題才能及時發現解決!!! 具體的兼容問題解決方法 有很多種,沒法給你一一列出來! 只能說根據出現的具體情況 來具體找應對方法,靠自己慢慢積累經驗,自己發現問題 ,然後尋找解決的辦法,時間久了 你自然就會都明白的!!!不過要說出現的兼容問題越多,越是說明你寫的代碼不夠標准,應該盡量避免兼容問題的出現,把兼容問題出現的幾率降到最低,主要還是要提高自身技術水平!!!光靠兼容代碼是不能完全解決問題的,畢竟過多的使用兼容代碼會讓樣式表看上去很亂,對今後的修改維護工作造成很多麻煩!!!追問:多看看 XHTML標准 的相關文章,注意代碼的書寫規范,還有要養成寫注釋的習慣,這樣出現問題的時候找到問題也很方便! w3c網上有

7、網頁設計中如何解決瀏覽器兼容問題

為了能讓網站設計正常的運行於各種瀏覽器平台,網站設計師們不得不想盡辦法處理好網站建設中的瀏覽器兼容問題。正是因為網站設計當中的這一需要產生了一項新技術— CSS Hack。 CSS Hack 就是針對不同瀏覽器寫出不同的 CSS code 的過程,主要用來解決目前各類瀏覽器無法標准解析CSS樣式,導致同一網站設計頁面在不同瀏覽器下出現顯示效果不一致的兼容問題。 針對不同瀏覽器,可以將CSS Hack 網站設計代碼整理如下:
1、針對I E 系列瀏覽器的網站設計代碼 針對 IE 6 的專屬 CSS Hack 網站設計代碼 #id{ _display: block; } 也就是在網站設計CSS屬性前加一個小劃線就好。 針對 IE 7 的專屬 CSS Hack 網站設計代碼 #id{ *display: block; } 即在網站設計CSS屬性前加上一個星號即可 針對 IE 8 的專屬 CSS Hack 網站設計代碼 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示,解決辦法為在網站設計CSS屬性後分號前加上空格與斜線並加入一個數字9即可 。
2、針對火狐的CSS Hack 網站設計代碼 火狐可謂是最標準的瀏覽器之一了,網站設計技術只要稍稍不到位就能體現得淋漓盡致,所以不少網站設計師也很頭痛,其實想要解決火狐的兼容性除了要把網站設計的基礎知識扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix(){ } 裡面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3、針對 Safari 的CSS Hack 網站設計代碼 Safari是蘋果計算機的最新作業系統Mac OS X中新的瀏覽器,用來取代之前的Internet Explorer for Mac,使用了KDE的KHTML作為瀏覽器的運算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、針對 Opera 的CSS Hack 網站設計代碼 Opera即Opera Software ASA,是台式機、各種設備和移動網路瀏覽器市場的商業領袖,因快速、小巧和比其他瀏覽器更佳的標准兼容性獲得了國際上的最終用戶和業界媒體的承認,並在網上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 這個世界上必然不會存在絕對完美的事物,因此運用以上方法讓我們的網站設計更好的與各種瀏覽器兼容的時候其實已經違反了網站製作的W3C標准。

與網頁設計時怎樣兼容各瀏覽器相關的知識