DIV 상위 속성 CSS 크로스 브라우저 문제

Question

며칠 동안 나를 괴롭히는 한 가지 문제가 있습니다. Wordpress, 특히 CSS http://fabienmischler.com/의 테마를 만들었습니다. 문제는 오른쪽의 DIV 라인이 Chrome Mac 버전 및 Safari에서만 정렬된다는 것입니다. 다른 모든 브라우저 (INCLUDING CHROME Win-version)는 다르게 렌더링합니다. 오른쪽의 연락처 양식 (슬릭 양식의 수정 된 플러그인)에서도 마찬가지입니다. 이 문제를 해결할 수있는 우아한 방법이 있습니까? 아니면 CSS 해킹을 사용해야합니까? 그렇다면 Chrome Windows 버전은 어떻게됩니까?

컨테이너는 절대적으로 DIV (줄이 있음)입니다.

모든이가 표준 스타일에 포장되어

div#container { 
margin: 0; 
position: absolute; 
left: 300px; 
height: 100%; 
right: 0; 
top: 0; } 

(있는 style.css) : 여기

는

#hr-title { 
position: absolute; 
right: 0; 
top: 100px; 
width: 14%; 
height: 1px; 
z-index: 9999; 
background-color: black; } 

이 DIV가 (워드 프레스 표준) 컨테이너 - 사업부의 일부입니다 DIV이다 Wordpress에서.

나는 에릭 마이어 사전에 http://meyerweb.com/eric/tools/css/reset/

감사에 따라 시트를 다시 CSS !!!!

Answer 1

여기에서 문제는 텍스트의 다른 브라우저에서 텍스트를 렌더링하는 것입니다. 특히 line-height 및 vertical-alignment입니다. 그들은 결코 동일하지 않습니다 ...

가능한 해결책은 제목 아래에 라인에 underlined text decoration을 사용하지 말고 다른 라인과 동일한 top 위치를 사용하여 별도의 요소로 그릴 수 있습니다. 이렇게하면 각 브라우저에서 항상 올바르게 정렬됩니다.

h1 { float: right; text-decoration: none; } 
h1:before { content: " "; position: absolute; width: 100%; height: 1px; top: 101px; background: #000; } 

업데이트

다른 해결책은 절대적인 위치 표기에 대해 광고 될 것이다 : 여기

이를 달성하기 위해 일부 샘플 CSS 코드이다. 16px의 상부에 타이틀의 라인에 대하여 설정 96px

#hr-title { top: 96px; } 
h1.entry-title { float: right; position: relative; text-decoration: none; margin-bottom: 15px; } 
h1:before { background: #000; width: 100%; height: 1px; top: 16px; position: absolute; content: " "; }