CSS 브라우저 호환성 문제에 대한 조언

Question

아빠가 만드는 기존 웹 응용 프로그램에서 CSS 브라우저 호환성 문제를 해결하도록 요청했지만 CSS의 기본 내용 만 알고 있습니다.

필자는 IE가 일반적으로이 문제와 대부분의 사람들에게 Firefox 및 Opera와 같은 "표준 호환"브라우저에 대한 CSS가 있어야한다는 내용을 읽은 다음 조건부 주석을 추가하여 스타일 시트를 지정합니다. 다양한 IE 버전. 그리고 이것이 제가 실제로하려고하는 것입니다.

그러나 IE의 경미한 문제 이외에도 Google 크롬에도 문제가 발생했습니다. 특히 Google 크롬 용으로 다른 스타일 시트를 만드는 것이 좋습니다.

이 같이 방법의

이미지 및 파이어 폭스에 보이는 방법 : 그것은 구글 크롬에 보이는 방법

:

여기

이 중 일부입니다 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> 

나는 내가이 만든 아니었다 이후 더 코드 조각을 게시 할 수 있다고 생각하지 않습니다. 조언이 있으십니까? Chrome 용으로 별도의 CSS를 만들어야하나요? 미리 감사드립니다! (이전에이 문제를 본 적이)이이 문제의 원인인지 모르겠어요

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

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

하지만 그건 : :)

Answer 1

나는 당신이 CSS에 당신의 요소에 대문자를 사용하지한다고 생각합니다 좋은 충고. 또한 스크린 샷에서 CSS 렌더링에 따라 Firefox와 Chrome이 동일한 방식으로 동작하는 경향이 있음을 알 수 있습니다.