원본 텍스트 : http://www.mikkolee.com/13
나는 최근에 수직 정상 속성을 신중하게 연구했으며 그 결과는 나를 놀라게했다. 이 경험이 풍부한 CSS 표준은 실제로 각 브라우저에서 다르게 수행됩니다.
기준선 서브 하위 텍스트 텍스트 텍스트 텍스트 바닥 텍스트-바닥 중간 및 다양한 길이 값 (%, em, ex 등)을 포함하여 수직 정체에 대한 많은 값이 있습니다. 내가 생각하는 가장 과장된 가치 중 하나 인 바닥을 보여 드리겠습니다. 코드는 다음과 같습니다.
p {
글꼴 크기 : 18px;
라인 높이 : 36px;
Font-Family : Tahoma, Sans-Serif;
}
img {
수직 정상 : 바닥;
}
그런 다음 다양한 브라우저 에서이 CSS의 효과를 살펴 보겠습니다 (사진은 의도적으로 제작되어 상대 위치를 명확하게 볼 수 있습니다).
글쎄,이 결과는 실제로 매우 믿어지지 않습니다. 일반적으로 Firefox는 IE보다 더 정확하게 설명 할 것이라고 생각하지만 Opera를 보면 Safari/Win이 Firefox 측에있는 반면 IE와 동일하다는 것을 알았습니다. 솔직히 말해서, 나는 무슨 일이 일어나고 있는지 모르겠습니다.
나는 "권한 CSS 가이드 (Second Edition)"를 신중하게 연구하고 W3C를 찾은 다음 직접 수직 정체에 대한 그림을 만들었습니다.
W3C에 따르면, 인라인 요소의 수직 정체가 기준선, 상단, 하단, 요소의 기준선 (또는 중간, 상단, 하단)으로 설정 될 때 그림 상단 및 주변 텍스트의 상단과 같은 주변 요소와 동일합니다. 텍스트 탑 및 텍스트 버튼이 요소의 텍스트 탑 (또는 하단) 인 경우 주변 요소의 텍스트 탑 (또는 텍스트-바닥)을 정렬합니다. 길이 (%, em, ex)가 기준에 따라 상승하면 양수가 증가하고 음수가 줄어 듭니다. 중간에 요소의 중심이 주변 요소의 중심과 정렬됩니다. 여기의 중심의 정의는 다음과 같습니다. 그림은 물론 높이의 절반이며, 텍스트는 기준선, 즉 소문자 문자 x의 중심 에 따라 0.5ex로 이동해야합니다. 그러나 많은 브라우저는 종종 EX 단위를 0.5EM으로 정의하기 때문에 반드시 X의 중심이 아닙니다 (예 : X의 높이는 10px이어야하고 EM은 18px이므로 두 값은 다릅니다).
그러나 위의 지침에 따르면 각 브라우저의 설명이 너무 다르다는 것은 놀라운 일입니다. 왜 이것이 사실인지 연구하기에는 너무 게으르다. 일반적으로 글꼴에서 각 라인의 위치에 대한 정의가 다른 정의를 가져야 하므로이 문제는 수직 정렬과 관련이있을뿐만 아니라 인라인 텍스트 및 인라인 사진의 구조에 대한 브라우저의 설명과 관련이 있습니다.
마지막으로, 테스트 페이지를 제공하고 각 브라우저에서 수직 정체 값의 다른 값에 대한 설명을 살펴볼 수 있습니다.
http://www.mikkolee.com/weblab/001_vertical/
각 브라우저와 완전히 다른 중간 또는 텍스트 탑과 같은 다른 값을 테스트 할 수 있습니다. 경험이 있으시면 ~~에 대해 토론하십시오