내 CSS 코드에 무슨 문제가 있습니까?

다음 HTML 코드는 크롬에서 잘 보이지만 firefox (제목과 링크 사이의 거리가 Chrome과 같지 않음)에서 잘 보이지 않습니다. 최적화 방법을 아는 사람은 누구입니까? 그것은해야한다 (크롬 스크린 샷)처럼 보이는 방법 내 CSS 코드에 무슨 문제가 있습니까?

이

은 다음과 같습니다

 html, body { 
     height: 100%; 
     width: 100%; 
     padding: 0px; 
     margin: 0px; 
    } 
    body { 
     background-image: url(background.png); 
     background-repeat: repeat; 
     background-position: top left; 
    } 
    #main { 
     font-family: 'Raleway', sans-serif; 
     position: absolute; 
     left: 190px; 
     top: 240px; 
     font-size: 26px; 
    } 
    #title { 
     position: absolute; 
     left: 180px; 
     top: 110px; 
     font-family: 'Vollkorn', serif; 
     font-size: 26px; 
    } 
    a:link, a:visited { 
     text-decoration: none; 
     font-family: 'Raleway', sans-serif; 
     color: #000000; 
    } 
    a:hover { 
     text-decoration: underline; 
    } 
    ::-moz-selection { 
     background: #fe57a1; 
     color: #fff; 
     text-shadow: none; 
    } 
    ::selection { 
     background: #fe57a1; 
     color: #fff; 
     text-shadow: none; 
    }

이 HTML 코드는 다음과 같습니다 http://i.imgur.com/18SmK.png

이것은 CSS 코드 : http://i.imgur.com/R6DZk.png
이것은 파이어 폭스의 모습입니다 :

<div id="title"> 
    <h1>Title</h1> 
</div> 
<div id="main"> 
    <ul> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    </ul> 
</div>

글쎄, 필자는 개인적으로 메인 div에 제목을 넣는 것이 더 쉬울 것이라고 생각합니다.

<div id="main"> 
<h1>Title</h1> 
    <ul> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    </ul> 
</div>

다음 CSS에서

h1 { font-family: 'Vollkorn', serif; font-size: 26px; font-weight: bold; }

그러나이 정상적으로 작동하지 않습니다/

출처

2011-11-11 S3iOp

[CSS 재설정] (http://meyerweb.com/eric/tools/css/reset/)을보고 싶을 수 있습니다. 브라우저는 일반적으로 여백, 테두리 등의 기본값이 같지만 때로는 사용자가 설정을 덮어 쓰지 않는 이상한 점이 있습니다. –

리셋에서 제거 된 모든 스타일을 다시 선언 할 필요가 없으므로 normalize는 많은 상황에서 리셋보다 좋을 수 있습니다. [http://html5boilerplate.com/](http://html5boilerplate.com/)는 시작하기에 좋은 곳입니다. 그들은 CSS의 재설정에 대한 자세한 설명을 normalize.css – Larry

가지고 있습니다. 그러나 나는 그것이 어떻게 든 삐걱 거리는 해결책이라고 생각합니다 : D 이미 언급했듯이 제목은 메인 태그에 포함되어 있지 않으며 그 위치를 정의했습니다. 제목과 메인 태그를 두 번 필요하지 않습니다 : D 조하지만 초보자로서 나는 충분히 자신의 그것을 해결하기 위해 숙련되지 않습니다 : ( – S3iOp

내 컴퓨터에서 크롬과 파이어 폭스 사이의 제목과 본문의 간격에 차이가없는 것을 확인할 수 있지만 IE를 사용하고 있습니다. 그래서 h1 태그에 CSS 스타일을 추가했습니다.

이렇게하면 간격을보다 일관되게 유지하는 데 도움이되는 것처럼 보입니다.

출처

2011-11-11 15:03:09 user1041890

그것은 라인의 높이 문제 일 수 있습니다. 제목 및 본부에서 줄 높이를 설정하십시오.

출처

2011-11-11 14:45:32 Guy

예 ... 이미 이것을했지만 슬프게도 효과가 없습니다 :/ – S3iOp

좋아, 다른 사람이 말한 것을 시도하고 주 CSS 파일 위에 머리에 broser 재설정 파일을 추가하십시오. Yahoo는 좋은 CSS 재설정 파일을 수행합니다. – Guy

UL 요소의 여백과 여백을 0으로 설정하여 제거해야합니다.

ul{ 
    margin:0; 
    padding:0; 
}

당신은 쉽게 대부분의 브라우저에서 동일한보기를 얻을 CSS 리셋 코드를 사용할 수 있습니다.

출처

2011-11-11 16:06:39

내 CSS 코드에 무슨 문제가 있습니까?

답변

관련 문제