CSS 상자/ul 메뉴

내 CSS가 올바르게 작동하는 데 심각한 문제가 있습니다. 내가 사용하는 3 가지 브라우저 (Chrome, IE 및 FF) 모두 다르게 보입니다. CSS 상자/ul 메뉴

지금 손에 질문에, 나는 다음과 같은 URL의 예를 복사하는 것을 시도하고있다 : http://www.alistapart.com/articles/taminglists/ 그냥과 파란색 메뉴 "현실 세계에서"거의 아래로 스크롤을 찾습니다.

그것은 크롬에서 완벽하게 작동

(I 사용자 정의 이미지를 사용) 내가이 메뉴를 구현 한,하지만 사용자 정의 이미지가 동작하지 않습니다, 나는 내가 후 나는 모양을 얻을. IE에서는 이미지 왼쪽에 이미지의 여백이 생기고 이미지는이 여백 안에 있습니다. FF에서는 이미지가 텍스트 위에 놓여지고 재미있는 모양을 만듭니다 (여백 공간에서도).

내 URL은 다음과 같습니다 나는 IE에 대한 별도의 스타일 시트를 추가하려고 다시 패딩/여백을 제거하지만, 문제가 해결되지 않은 한 http://homeweb.mah.se/~M09K0291/123789/Lab7/

. Chrome에서 제작하는 출력물을 원합니다.

출처

2009-08-13 Patrick

방금 게시 한 링크에서 귀하의 사이트를 확인한 결과 IE7/8 및 Firefox 3.5에서 모든 것이 정상적으로 보입니다. –

모든 브라우저에는 여백, 여백, 공백 등에 대한 기본값이 있습니다. 대부분 CSS의 차이점이 있습니다. 전체 사이트에 대해 using a reset stylesheet을 고려하십시오. 이렇게하면 모든 브라우저에서 인식해야하는 공통 기준을 얻을 수 있습니다. 전체 스타일 시트에 대해 재설정 CSS를 설정하고 싶지 않거나 소용 없으면 적어도 메뉴에 맞게 CSS를 만드십시오.

다음,이 메뉴의 첫 번째 규칙 확인이 일 후에 다른 메뉴 스타일을 정의 : 문제의 대부분을 수정해야

/* This example assumes your menu is contained 
    in a <div /> with an ID of "menu" */ 
div#menu, div#menu ul, #menu li, ul#menu a 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    line-height: 1; 
    list-style: none; 
}

합니다.

출처

2009-08-13 12:34:52

하나만 제외하고는 거의 모든 문제가 해결되었지만 이미지는 여전히 상자 바깥에 나타납니다. 마진과 패딩은 이제 사라졌습니다 (신에게 감사하십시오). 그러나 FF에서는 커스텀 이미지가 상자 위 (여전히)와 IE에서 마진이 이전의 위치에 있습니다. – Patrick

다른 브라우저에서 목록을 만드는 방식이 문제 일 수 있습니다. 목록 항목에 여백이나 여백이있는 경우 일 수 있습니다.

당신이 리 태그에 여백이-왼쪽 32px을 목록 스타일 위치 규칙을 제거하고 줄 경우, 체크 표시를 볼 수는 적어도 파이어 폭스에서 설명하는 방법을 줄. Firebug 확장은 이러한 문제를 진단하는 데 큰 도움이됩니다.

재설정 스타일 시트는 브라우저가 스타일을 처리하는 방식을 일관되게 유지하는데도 도움이됩니다 (올바르게 설명한 것처럼).

출처

2009-08-13 12:47:55

CSS 상자/ul 메뉴

답변

관련 문제