2013-05-20 108 views
-6

我現在正在開發我的網站,並且正在考慮將FireFox作爲主要測試區域,但是我在Chrome和IE9上測試它的結果不同。在Chrome上,一旦我打開頁面,其中一個圖層就不會坐在它的位置,但是一旦我刷新它就完全適合我想要的位置。奇怪?而在IE瀏覽器中,其中一個div(左邊)似乎具有較高的頁邊距,使得它離其他div更遠,並且字體不同,這使得一些單詞更大並且不適合邊框。在所有瀏覽器上使我的父親看起來不錯並且我認爲我的主要測試區域是哪個瀏覽器最好的主意是什麼。爲什麼我的網站在其他瀏覽器上看起來不太好?

P.S:爲什麼人們會爲我的問題投票?我們都在學習。

+0

當你在IE中遇到浮動div問題時,你應該檢查你的文檔類型和頭文件。查看http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733 –

+0

我認爲人們拒絕投票你的問題的原因是基本上是問。當我們看不到任何代碼時,爲什麼我的網站在所有瀏覽器中看起來不太好。如果你提供了一個鏈接,我認爲它會幫助人們更容易地回答你的問題。 –

回答

0

首先,

您應該使用復位/在你的CSS規範的腳本。好的是Eric Meyers's

將其包含在樣式表的開頭。

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
+0

我加入了這個,但事情變得更糟了,浮動div更多地離開了其他div。我也注意到底部的d​​iv也與左邊的div完全一樣。 – mkiller1001

+0

是的,你應該首先包括這個,然後開始編碼你的CSS。它基本上消除了瀏覽器之間的不一致,例如邊距和填充等。然後可能會有一些問題與您的代碼一般。你有沒有工作的例子? –

+0

你有一個jsfiddle或工作的例子嗎? http://jsfiddle.net/ –

0

沒有看到代碼無法確切地說,但你開發時卻錯過了最佳實踐。你應該在IE和其他瀏覽器範圍內開發時檢查側面,然後你可以在上升的時候修復它們。

  • 檢查您的文檔類型。
  • 重置元素
  • 確定IE盒子模型問題。
0

你應該使用類似樣板的東西來啓動每個項目或只是使用一些CSS重置。

這樣,瀏覽器(填充,邊距等)的微小差異可以修復。

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
... 

更多:http://meyerweb.com/eric/tools/css/reset/

關於你應該在最重要的測試瀏覽器...在長期(按週週)我在一些小的relevante瀏覽器測試只是爲了確保它的也適用。

相關問題