導航:首頁 > 萬維百科 > 網頁設計瀏覽器兼容問題

網頁設計瀏覽器兼容問題

發布時間:2021-03-25 00:14:15

1、網頁設計中瀏覽器間不兼容問題如何解決,國內主流的瀏覽器有那幾個啊?

最多的還抄是IE,單說兼容性最襲差的IE6.0占據了全世界IE市場的35%.
國內網頁的不兼容主要禍起IE6.0。其他的內核forefox的「變色龍」內核
蘋果瀏覽器和chrome使用webkit內核。搜狗和360極速版也是webkit的內核。
360普通版是IE內核,至於他表現得更像IE6,還是兼容性好那麼一些的IE8就
要看用戶機器上安裝的是IE6/IE8了。
傲遊2.X使用IE內核。3.X使用webkit內核。
騰訊也一樣4.X用IE內核。5.X 開始用webkit內核了。
operal使用的自己內核,但是是非主流的市場在國內百分之1-2.
webkit和firefox的內核兼容性非常好,同樣的內容表現一致,偶爾會有
很小很小細節的差別。
說起兼容性如何解絕。這需要經驗遇到不兼容就用一些技巧上的變化。
如果你沒什麼經驗的話我就建議你設計好網頁之後至少在IE 6,IE8和firefox下測試。
firefox之所以要測試是因為他占據了市場的第二
遇到問題上網查,請教啊什麼的。
最後練習+動腦。經過一段時間的積累你就會對瀏覽器之間的差別掌握個7-8分了。
祝你好運

2、網頁設計瀏覽器兼容性的問題,求解決方法!!!

兄弟。
最簡單的一個。在body與body之間加一個center標簽。

然後,請仔細學習一下css的排版吧專。網頁屬居中,是最基礎的東西了。

常規做法如下:
<style type=」text/css」>
body { background-color: #eee; text-align: center; }/*頁面居中*/
#wrap { margin: 0 auto; width: 960px; background-color: #fff; text-align: left; }/*讓文字默認左對齊*/
</style>

<html>
<head>
<title></title>
</head>
<body>
<div id="wrap">
<p>內容區</p>
<p>內容區</p>

<p>內容區</p>

<p>內容區</p>

<p>內容區</p>

<p>內容區</p>

</div>
</body>
</html>

3、CSS網頁設計頁面瀏覽器兼容性問題怎麼解決?

<meta http-equiv = "X-UA-Compatible" cotent = "IE=edge,chrome=1"/>

來這樣寫可以達到的效果是自如果安裝了GCF,則使用GCF來渲染頁面,如果沒安裝GCF,則使用最高版本的IE內核進行渲染。Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)。這個插件可以讓用戶的IE瀏覽器外不變,但用戶在瀏覽網頁時,實際上使用的是Google Chrome瀏覽器內核,而且支持IE6、7、8等多個版本的IE瀏覽器。

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

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識別。

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、CSS網頁設計頁面瀏覽器兼容性問題怎麼解決

所謂的瀏覽器兼容性問題,是指因為不同的瀏覽器對同一段代碼有不同的解析,回造成頁面顯示效答果不統一的情況。在大多數情況下,我們的需求是,無論用戶
用什麼瀏覽器來查看我們的網站或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。

我想把前端開發人員劃分為兩類:

第一類是精確按照設計圖開發的前端開發人員,可以說是精確到1px的,他們很容易就會發現設計圖的不足,並且在很少的情況下會碰到瀏覽器的兼容性問題,而這些問題往往都死瀏覽器的bug,並且他們製作的頁面後期易維護,代碼重用問題少,可以說是比較牢固放心的代碼。

第二類是基本按照設計圖來開發的前端開發人員,很多細枝末節差距很大,不如間距,行高,圖片位置等等經常會差幾px。某種效果的實現也是反復調試得
到,具體為什麼出現這種效果還模模糊糊,整體布局十分脆弱。稍有改動就亂七八糟。代碼為什麼這么寫還不知所以然。這類開發人員往往經常為兼容性問題所困。
修改好了這個瀏覽器又亂了另一個瀏覽器。改來改去也毫無頭緒。其實他們碰到的兼容性問題大部分不應該歸咎於瀏覽器,而是他們的技術本身了。

與網頁設計瀏覽器兼容問題相關的知識