關於CSS瀏覽器兼容性問題的建議

我父親問我在他們正在創建的現有Web應用程序上修復一些CSS瀏覽器兼容性問題，但我只知道CSS的基礎知識。關於CSS瀏覽器兼容性問題的建議

我讀過IE瀏覽器通常在這方面的問題最多，大多數人建議首先爲符合「標準」的瀏覽器（例如Firefox和Opera）創建一個CSS，然後添加一個條件註釋以指定樣式表各種IE版本。而這正是我實際打算做的。

但是除了IE的小問題外，我在Google Chrome上也遇到了問題。如果我特別爲Google Chrome創建另一個樣式表，建議這樣做嗎？

的應該如何看起來像圖像，以及它如何看起來像在Firefox上：

Example 1

它是如何看起來像谷歌Chrome瀏覽器：

Example 2

下面是一些CSS代碼：

#MenuMain-content { 
    background : transparent url(image/mainmenu.png) repeat-x center top; 
    height : 27px; 
    font-size : 11px; 
} 

#MenuMain-content .Menu { 
    height : 25px; 
    margin : 0 0 0 10px; 
} 

#MenuMain-content .Menu A { 
    font : normal 11px Verdana; 
    color : #bfd7ff; 
    display : block; 
    padding : 5px 7px 7px 7px; 
} 

#MenuMain-content .Menu A:hover { 
    color : #ffffff; 
    padding : 5px 7px 7px 7px; 
} 

#MenuMain-content .Menu .Selected { 
    color : #ffffff; 
} 

#MenuMain-content .Menu .Selected:hover { 
    color : #ffffff; 
} 

#MenuSub-content { 
    background : url(image/submenu.png) no-repeat center top; 
    height : 20px; 
} 

#MenuSub-content .Menu { 
    height : 20px; 
    margin-left : 15px; 
} 

#MenuSub-content .Menu A { 
    color : #cccccc; 
    height : 17px; 
    display : inline-block; 
    margin-top : -1px; 
    padding : 2px 7px 0 7px; 
} 

#MenuSub-content .Menu A:hover { 
    background-color : #999999; 
    color : white; 
    height : 16px; 
    margin-top : -2px; 
} 

#MenuSub-content .Menu .Selected { 
    background-color : #336699; 
    color : white; 
    height : 16px; 
    margin-top : -2px; 
    padding-top : 2px; 
} 

#MenuSub-content .Menu .Selected:hover { 
    background-color : #204674; 
    color : white; 
    height : 16px; 
}

下面是一些HTML代碼的：

 <div id="MenuMain-content"> 
      <asp:Menu ID="MainMenu" 
         runat="server" 
         MaximumDynamicDisplayLevels="0" 
         Orientation="Horizontal" 
         CssClass="Menu"> 
      <StaticSelectedStyle CssClass="Selected" /> 
      </asp:Menu> 
     </div>       

     <div id="MenuSub-content"> 
      <asp:Menu ID="SubMenu" 
         runat="server" 
         Orientation="Horizontal" 
         CssClass="Menu"> 
         <StaticSelectedStyle CssClass="Selected" /> 
      </asp:Menu>     
     </div>

我不認爲，因爲我不是誰創造了這一個我可以發佈更多的代碼片斷。有什麼建議嗎？我應該爲Google Chrome創建一個單獨的CSS嗎？提前致謝！ :)

來源

2012-04-16 Mae

如果您想演示這些問題，除了在此處發佈代碼外，還可以在http://jsfiddle.net上創建示例，這很好。 – Marcin 2012-04-16 07:49:57

我從來沒有真正使用條件註釋。通常有一種適用於所有瀏覽器的解決方案（包括所有主要brosers和ie7 +）。我認爲你應該做的是爲firefox獲取/使用firebug，並且使用chromes開發工具來檢查他們擁有的元素和css，然後找出下一步該做什麼。 – Joonas 2012-04-16 08:00:48

嘿你能看到你的navi的實時代碼 – 2012-04-16 09:00:25

我認爲你不應該使用大寫字母在CSS的元素：

// Don't do this 
#MenuMain-content .Menu A {} 

// Do this instead 
#MenuMain-content .Menu a {}

我不知道這是不是你的問題的原因（之前從來沒有見過這個問題），但它的一個很好的建議。此外，你的屏幕截圖顯示它非常奇怪，根據CSS渲染，Firefox和Chrome傾向於採用相同的方式。

來源

2012-04-16 07:46:46

就在昨天，有人發佈了一個使用CSS3的答案，它在Chrome和Firefox上呈現得非常不同。 – Marcin 2012-04-16 07:49:09

好吧，CSS3超出了這個討論的範圍。這還不是W3C標準，瀏覽器只是試驗它，每一個都是自己的方式。 **通常** Firefox和Chrome與標準CSS的行爲方式相同。 – 2012-04-16 07:51:40

我不是那個最初創造這個的人，所以我不知道它爲什麼在首都。但感謝您的建議！我會改變:) 我也認爲Firefox和Chrome的行爲應該與CSS類似。這就是爲什麼我現在不確定該怎麼做-_- 再次感謝！：d – Mae 2012-04-16 07:53:28

關於CSS瀏覽器兼容性問題的建議

回答

相關問題