폼 요소와 프롬프트 텍스트가 정렬되지 않는 문제_HTML/Xhtml_웹페이지 제작

양식과 관련된 많은 웹사이트 페이지에서는 양식 요소와 프롬프트 텍스트가 정렬되지 않는 문제가 있습니다. 그래서 저는 이 문제를 연구하기로 결정했습니다.

최근 프로젝트에는 특히 체크박스와 라디오 등 다양한 형태의 제작이 포함됩니다. 그러나 프론트엔드 개발 과정에서 단일(다중) 체크박스와 그 뒤의 프롬프트 텍스트는 어떠한 설정 없이도 정렬될 수 없다는 사실이 발견되었으며, Firefox와 IE에는 큰 차이가 있습니다. 수직 정렬:중간을 설정하더라도 여전히 완벽하게 정렬되지는 않습니다. 아래 그림과 같습니다.

그래서 온라인에서 일부 웹사이트를 확인해 보니 아래 그림(FF3.5)과 같이 이 문제가 흔한 것으로 나타났습니다.

양식이 포함된 많은 웹사이트 페이지에서는 양식 요소와 프롬프트 텍스트가 정렬되지 않는 문제가 있습니다. 그래서 저는 이 문제를 연구하기로 결정했습니다. 우선 휘틀리 선배님의 "수직정렬에 대해서는 사람마다 의견이 다르다"라는 글을 검색해봤습니다. Wheatlee는 자신의 기사에서 수직 센터링에 대해 다음과 같은 핵심 사항을 언급했습니다.

1. Vertical-align:middle을 사용하면 요소의 중심이 주변 요소의 중심과 정렬됩니다.

2. 여기서 "중심"의 정의는 다음과 같습니다. 그림은 물론 높이의 절반이고 텍스트는 소문자의 정확한 중심인 기준선을 기준으로 0.5ex 위로 이동해야 합니다. 엑스". 하지만 많은 브라우저에서는 ex의 단위를 0.5em으로 정의하는 경우가 많기 때문에 반드시 정확한 중심이 아닐 수도 있습니다. 문제가 발생했을 때 가장 먼저 생각한 것은 브라우저가 "체크박스 렌더링에 동일한 규칙을 사용했는지 확인하는 것"이었습니다. " 및 이미지(체크박스를 정사각형 이미지로 처리하는지 여부). 그래서 다음과 같은 코드를 작성했습니다.

<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;"  src="testpic.gif" />

테스트 텍스트

코드에 있는 testpic.gif가 검정색으로 똑같은 크기입니다. 확인란 그림으로. FF3.5에서의 디스플레이는 다음과 같습니다.

FF3.5에서 세로 방향에 문제가 있는 것으로 나타났습니다. 확인란과 그림의 정렬 동일한 규칙을 사용하여 렌더링됩니다. 즉, 확인란은 정사각형 그림으로 처리됩니다(IE는 그렇지 않음). "가운데에 있을 때 요소의 중심이 주변 요소의 중심과 정렬된다"는 Whitlee의 관점에 따르면, 체크박스 뒤에 영문자를 입력하면 체크박스의 중심이 주변 요소의 중심과 정렬됩니다. 영어의 소문자 x. 테스트 후 FF3.5는 기본적으로 다음과 같습니다(일부 글꼴 크기에는 특정 오류가 있습니다. 예를 들어 글꼴 높이가 짝수인 경우 중심점이 때로는 일반 지점보다 1픽셀 위에 있고 때로는 1픽셀 아래에 있습니다. 반) . 사진과 같이

하지만 이는 중국인에게는 좋은 결과가 아닙니다. 중국어는 정사각형 글꼴이고 글꼴 크기가 동일하므로 높이가 소문자 x보다 훨씬 높습니다. 따라서 브라우저 내장 방식에 따르면, Vertical-align:middle 만을 사용하는 것만으로는 어떠한 경우에도 중국어 정렬을 할 수 없습니다(한자만 쓰는지, 중국어 먼저, 영어 먼저, FF3.5는 소문자 x 가운데 기준) 정렬 방법). 그러나 Wheatlee의 기사를 되돌아보면 그는 이 소문자 x 중앙 정렬 렌더링 방법이 "텍스트"를 위한 것이라고 말했습니다. 그럼 말이 아니라면…? 체크박스 뒤에 라벨과 같은 인라인 요소가 있고 그 안에 텍스트가 쓰여지면 어떻게 될까요? 브라우저는 이 인라인 요소를 "블록"으로 간주하고 이미지와 유사한 규칙에 따라 렌더링합니까? 그렇다면 우리는 목표를 달성한 것입니다.

그런데 테스트해 보니 아쉽게도 라벨을 추가하든 안 추가하든 별 차이가 없습니다. 이는 FF3.5/IE6/IE7에도 해당됩니다. FF3.5의 Firebug를 사용하면 브라우저가 레이블의 높이 값에 따라 중심점을 정렬하지 않는다는 것을 증명합니다. 그림과 같이

앞의 가정을 따르면 빨간색과 파란색 선이 겹쳐야 합니다. 하지만 현재 상황은 1px 정도 다르다는 것입니다. 그리고 이 1px는 불규칙한데, 글꼴 크기가 커지면서 해당 관계를 추출하기가 쉽지 않은 것 같습니다. 그래서 레이블에 수직 정렬:중간을 다시 추가해 볼까 하는 생각이 들었습니다. 결과는 아래와 같습니다.

FF3.5 및 IE7에서는 1px만 누락되어 우리가 원하는 상태에 매우 가깝습니다. IE6에서는... 말문이 막힙니다.

위의 고민 끝에 저는 Whitlee와 같은 결론에 도달했습니다. 즉, 다양한 브라우저가 이 문제를 처리하는 방식에는 패턴이 없는 것 같습니다. 더욱이 모든 브라우저의 수직 정렬:중간 렌더링은 W3C에서 말하는 "상위 상자의 기준선과 상위 상자의 x 높이의 절반을 더한 상자의 수직 중간점을 정렬합니다"라는 내용을 완전히 준수하지 않는 것 같습니다. 🎜>
그러나 면밀히 요약하고 분석한 결과 최종 정렬 결과는 레이블의 높이와 현재 글꼴의 소문자 x 중심점과 관련이 있는 것으로 보입니다. 둘 다 렌더링 결과에 동시에 영향을 미칩니다. 시간(이게 왜 그런지는 모르겠지만)). 그렇다면 지금의 상황은 원하는 상태에 매우 가까워졌으니, 폰트 설정을 통해 소문자 x의 중심점 위치를 변경한 후 수직 정렬 결과를 "미세 조정"하는 것이 가능할까요?

결국 지속적인 테스트를 통해 Font-Family의 첫 번째 글꼴을 Tahoma로 설정하면 완벽하게 정렬이 이루어질 수 있다는 사실을 발견했습니다(Verdana와 같은 글꼴도 사용 가능). 그리고 FF3.5/IE6/IE7/IE8 및 Chrome에서는 정상적으로 표시됩니다. 최종 코드는 다음과 같습니다.

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

최종 효과:

이 시점에서 체크박스와 프롬프트 텍스트의 정렬 문제가 해결되었으며, 하지만 다른 양식 요소는 어떻습니까? 라디오 버튼을 테스트한 결과 여전히 문제가 있음을 발견했습니다. 프롬프트 텍스트는 여전히 위쪽에 있습니다. 방화범으로 확인한 결과 라디오 요소의 왼쪽 여백은 5px이고 위쪽 및 오른쪽 여백은 기본적으로 3px이지만 아래쪽 여백은 없는 것으로 나타났습니다. 사진과 같이

그래서 라디오의 여백을 제거해 보았는데 디스플레이는 정상이었습니다. 새로 고친 후. (사실 체크박스에도 여백이 있지만 여백이 4방향으로 동일하기 때문에 수직정렬에는 영향을 주지 않습니다.) 다음 그림은 흔히 사용되는 몇몇 폼 요소의 최종 표시 효과 및 최종 코드입니다. 실제 효과를 보려면 다른 브라우저를 사용할 수 있습니다. (참고: 데모에 사용된 12px 중국어 텍스트는 실제로 높이가 11px에 불과한 반면 IE에서 텍스트 상자 및 기타 요소의 높이는 22px이므로 하나는 홀수이고 다른 하나는 홀수입니다. 은 짝수이므로 이 부분은 IE에서 1px의 차이로 중앙이 정렬되지 않습니다. 텍스트 상자의 높이를 수동으로 홀수로 제어하거나 텍스트 높이를 짝수로 설정하면 디스플레이는 정상입니다):

팁: 수정할 수 있습니다. 실행 전 코드 일부

그리고 중국어 문제만 해결된 것이 아니라 프롬프트 정보를 다른 언어로 변경하면 발견됨 , 기본적으로 정렬될 수 있습니다. 적어도 처음처럼 너무 많이 이동하지는 않습니다. 다음은 스크린샷, 코드 및 몇 가지 예입니다.

팁: 먼저 코드의 일부를 수정한 다음

을 실행하면 됩니다. 이 시점에서 저의 연구 과정은 끝이 납니다. 하지만 각 브라우저가 결국 왜 이런 효과를 보이는지, 그 원리가 무엇인지는 아직도 알 수 없습니다. 시간이 나면 설명해 주실 수 있나요?

위 내용은 폼 요소와 프롬프트 텍스트가 정렬되지 않는 문제입니다._HTML/Xhtml_webpage 제작 콘텐츠에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!