Chrome에서 큰 글꼴의 Div를 겉보기에는 고려하지 않음

중간에 매우 큰 "No"가 다른 div와 겹치는 것처럼 보이는 이유는이 사이트 (http://areyouafuckingidiot.com/)에있는 이유를 알아 내려고했습니다. "아니오!"를 살펴볼 때 이것을 볼 수 있습니다. 텍스트를 추가하고 'border-bottom : solid 1px darkblue'를 .statement-text에 추가하면 다음 요소가 아래로 어떻게 겹쳐져 있는지 볼 수 있습니다. (앵커 태그를 사용하는 순간 잠시 자리를 비 웠습니다.Chrome에서 큰 글꼴의 Div를 겉보기에는 고려하지 않음

그러나 간단한 피들 (fiddle)로 복제하려고하면 할 수 없습니다. 여기에 바이올린이 있습니다 : http://jsfiddle.net/aronchick/uXH9C/5/ 그리고 내가하는 일을 간단히 줄였습니다.

<div id="firstDiv" class="normalSized"><a href="#" class="normalLink">Great text in here</a></div> 
<div id="secondDiv" class="veryLarge"><a href="#" class="LargeLink">VERY LARGE</a></div> 
<div id="thirdDiv" class="normalSized"><a href="#" class="normalLink">Back to Normal</a></div>

가운데 div는 적절히 간격을두고 겹치지 않습니다. 이견있는 사람?

출처

2013-07-13 aronchick

귀하의 바이올린은 페이지와 동일한 스타일을 가지고 있지 않습니다. 여기에 같은 스타일의 updated fiddle이 있습니다. 분명히 동일한 문제가 있습니다. 선 높이는 요소의 높이를 기준으로 계산되는 것이 아니라 글꼴 크기에 상대적으로 계산되는 것입니다. 요소가 겹치지 않도록하는 해결책은 inline-block으로 표시되도록 설정하는 것이 었습니다. 귀하의 사례 :

.statement-text{ 
    display: inline-block; 
}

출처

2013-07-14 06:31:04

감사합니다! 한 가지 더 빠른 질문 - 아래쪽 경계선을 더 단단하게 잡아 당길 수있는 방법이 있습니까? 테두리 간격이 효과가없는 것 같습니다. 그리고 "No!"위에 링크를두면 오버랩되는 것처럼 보이며 Z- 인덱스는 아무런 영향을 미치지 않는 것 같습니다 (No 링크는 그 아래의 링크를 차단하는 것으로 보입니다). – aronchick

@aronchick for the border spacing 작은 선 높이를 아마 80 %로 설정하려고합니다. 다른 요소와 겹치는 것을 보았습니다. 이상합니다. 수정하면 오버플로가 설정됩니다 : NO! 앞에서 언급 한 z- 인덱스를 사용하거나 z- 인덱스를 사용하려면 z- 인덱스 –

을 조정해야하는 요소에 명시적인'position : relative' 규칙을 추가하십시오. 나는 놀랐다 - 나는 성공없이 인라인 블록을 시도했다고 생각했지만, 나는 텍스트보다는 컨테이너에서 그것을 수행했을 것이다. – aronchick

Chrome에서 큰 글꼴의 Div를 겉보기에는 고려하지 않음

답변

관련 문제