如何解決瀏覽器兼容性問題

Question

我創建了一個供我個人使用的網站。我正在使用Mozilla Firefox。但是當我搬到IE7時，整個網站都丟失了。結構和所有的路線都沒有了。所以請幫我解決這個問題。

Answer 1

瀏覽器在實現佈局和CSS方面存在許多差異，最顯着的原因是most versions of Internet Explorer implement CSS badly。您必須爲此處的人員提供更具體的詳細信息，以便能夠爲您提供更多幫助，但一種可能的方法是use different stylesheets on IE from other browsers。需要警告的是，這是一個複雜的領域，甚至在IE版本之間也存在重大差異！

Answer 2

指定瀏覽器特定的樣式表是一種解決方案，但我真的不喜歡它，因爲它可能不可靠，難以管理。

您的最佳解決方案是在開發過程中在所有瀏覽器中進行測試，並確保在移到下一個設計元素之前，所有瀏覽器中的所有內容都應該如此。

經驗和反覆試驗是不幸的唯一方法。

Answer 3

我通常會在「當前/最新」版本中打開最少5種不同的瀏覽器（Internet Explorer，Firefox，Google Chrome，Apple Safari和Opera） - 有時我也會倒退一個版本 - 尤其是Internet Explorer作爲他們的標準像風一樣的變化。 :-)

我建立了一個遵循W3C http://www.w3.org/標準（X）HTML的網站，並使其能夠在Chrome和Internet Explorer中使用CSS和XHTML，然後完成大部分工作。

我花了很少的時間「擺弄」最後的瀏覽器，因爲它們或多或少都遵循相同的規格。其次谷歌瀏覽器和Firefox非常適合調試奇怪的CSS/HTML錯誤。

根據瀏覽器類型，我從不在瀏覽器中限制CSS，不使用「clearfix hacks」或任何特殊樣式表。

，但如果我的網站會在某些其他硬件平臺協同工作，如移動電話，我可能會做第二個樣式或者只是生成整個網站與其他結構上的另一個網址，如：http://m.example.com/

爲了幫助你使網站的工作，我寧願說：

1.）什麼是你目前的問題與HTML/CSS？你在哪裏做出了一些錯誤的決定，並且不能修復這些問題？

2.）重新構建已知W3C標準的網站，並檢查新的佈局和導航是否與Internet Explorer（最低7）和最新的Google Chrome兼容，那麼您已經覆蓋了大部分標準。

3）學習時使用display:block;在CSS http://www.w3schools.com/css/pr_class_display.asp

4）永遠不要在同一個CSS類混合使用空白和邊距寬度/高度設置，這將使一些舊的瀏覽器弄亂你的設計。而這可能是你的設計崩潰的主要原因。

最後...總是記得給我們提供一些關於你的問題的文檔，這樣我們可以檢查它是否真的知道解決方案...換句話說，問題在哪裏？給我們看一看....

這是否有用，請標記爲您的答案。由於

Answer 4

http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html

Answer 5

找出打破你的代碼，並在這種無聊的HTML解決它的if語句，這將是我的建議。

如果您的網站根本不顯示，您可以簡單地在if語句中編寫整個新頁面。

可悲的是，這些if語句僅支持IE變體，而不適用於Chrome，Firefox，Opera，Safari或其他。

<p><!--[if IE]> 
    According to the conditional comment this is Internet Explorer<br /> 
    <![endif]--> 
    <!--[if IE 5]> 
    According to the conditional comment this is Internet Explorer 5<br /> 
    <![endif]--> 
    <!--[if IE 5.0]> 
    According to the conditional comment this is Internet Explorer 5.0<br /> 
    <![endif]--> 
    <!--[if IE 5.5]> 
    According to the conditional comment this is Internet Explorer 5.5<br /> 
    <![endif]--> 
    <!--[if IE 6]> 
    According to the conditional comment this is Internet Explorer 6<br /> 
    <![endif]--> 
    <!--[if IE 7]> 
    According to the conditional comment this is Internet Explorer 7<br /> 
    <![endif]--> 
    <!--[if gte IE 5]> 
    According to the conditional comment this is Internet Explorer 5 and up<br /> 
    <![endif]--> 
    <!--[if lt IE 6]> 
    According to the conditional comment this is Internet Explorer lower than 6<br /> 
    <![endif]--> 
    <!--[if lte IE 5.5]> 
    According to the conditional comment this is Internet Explorer lower or equal to 5.5<br /> 
    <![endif]--> 
    <!--[if gt IE 6]> 
    According to the conditional comment this is Internet Explorer greater than 6<br /> 
    <![endif]--> 
    </p>