위치 : 다른 브라우저에 절대 문제

Question

나는 텍스트

<div id="text_head"> 
    <p class="dot">·</p> 
    <div class="line"></div> 
    <div class="line"></div> 
    <p id="p_head">Here is my</p> 
    <p id="p_sub">WEB DESIGN</p> 
</div> 

을 추가 할 예정되는 위치 절대 DIV하고이 Picture에서 볼 수

.dot { 
    color: #FFFFFF; 
    font-size: 80px; 
    left: 131px; 
    position: absolute; 
    top: 22px; 
} 

    .line {  
    background-color: #FFFFFF; 
    height: 2px; 
    position: absolute; 
    right: 0; 
    top: 67px; 
    width: 118px; 
} 

가 다음과 같은 CSS를 가지고 둘 다 브라우저에서 어떻게 렌더링되는지 차이점이 있습니다! p 요소의 기본 스타일을 margin: 0px 및 padding: 0px으로 설정했습니다.

도움이 될 것입니다. 편집 추가 CSS :

p { margin: 0; 
    padding: 0; 
    color: #FFF; 
    } 

#p_head { 
    font-family: impregnable_personal_use_onRg; 
    font-size: 74px; 
    margin: 0; 
    padding: 0; 
    } 

#p_sub { 
    font-family: alternategothic2_btregular; 
    font-size: 54px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
    } 

Answer 1

아마도 line-height에 문제가있을 수 있습니다. 라인 높이를 p에 재설정하려고 했습니까?

p {line-height: 1.2;} 

또는 당신은 모든 라인 높이의 재설정 수 :

body {line-height: 1.2;} 

Answer 2

은 차일의 오프셋 (offset) 재생하기 전에 상대에 대한 부모의 위치를 ​​설정합니다. 모든 하위 요소를 절대로 설정 했으므로 계층 구조를 계속 조회하여 상위 항목을 연관 시키며 상위 항목이 상대 항목으로 설정되지 않으면 body 태그까지 계속 이동합니다.

#text_head { 
     position: relative; 
    } 

Answer 3

전체 HTML/CSS 파일을 게시 할 수 있습니까? 편집기에 코드를 붙여 넣었지만 화면은 스크린 샷과 매우 다르게 렌더링되었습니다.

그런데 아직 글꼴 글꼴을 포함 시키려면 @ font-face 속성을 사용하는 것이 좋습니다. 그렇게하지 않으면 인쇄술이 기기에서 동일하게 보입니다. :)