CSS 브라우저의 동일 너비 공간 문제 해결_경험 교환

그러나 이는 그다지 신뢰할 수 없습니다. 예를 들어 공간 간격이 매우 크면 여러 자리 표시자를 추가해야 하며 페이지 크기가 매우 커집니다.

동시에 Safari의 너비는 설정된 문자의 공백 너비(Safari의 기본 글꼴은 Times)이므로 한자 하나에 두 개의 자리 표시자가 필요하다는 점에 유의하세요.

구체적인 상황은 아래 사진과 같습니다.

사실 이건 사파리 문제가 아니라 폰트 문제입니다. 해결책은 다음 속성을 사용하는 것입니다

font-family: '宋体'; 문제를 해결하려면 Safari의 기본 글꼴을 "宋体"와 같은 중국어 및 영어 등폭 글꼴로 설정하세요. 윈도우 버전 사파리 글꼴 설정의 경우 '심순' 대신 중국어 '송티' 같은 이름을 직접 사용해야 합니다(이유 아시는 형님들 알려주세요).

그러나 지금까지 우리의 근본적인 목표는 해결되지 않았습니다. 즉, "네이티브" 공간과 같은 자리 표시자를 사용하지 않고 사용할 수 있는지 여부입니다. 공백에 해당하는 CSS 속성을 고려하고 공백 사용에 대해 자세히 알아보면 다음 단계를 더 쉽게 처리할 수 있습니다.

요약하자면 공백을 사용하여 동일한 너비의 공간을 구현하는 데는 두 가지 조건이 있습니다. 해당 속성을 설정해야 합니다

공백: pre;

그런 다음 등폭 문자(등폭 공백 포함)를 설정합니다. 요약하자면 이렇습니다

글꼴군: '宋体', Simsun;
공백: pre;

중국어 CSS 이름을 사용하므로 실제 사용 시에는 스타일의 문자 인코딩을 고려해야 합니다. 동시에 추가로 고려해야 할 사항은 Apple 컴퓨터에 "Songli"(또는 기타 고정 폭 글꼴)가 있는지 여부입니다. Apple 컴퓨터를 사용하는 형제님, 테스트해 보시기 바랍니다.

--분할--

em 단위를 사용하는 또 다른 아이디어를 제공한 Xiaoma에게 ​​감사드립니다. 간단히 말해서 1em은 한 문자의 너비로 간주될 수 있으며, 마찬가지로 .5em은 문자의 절반입니다. 그러면 위의 상황은 이렇게 쓸 수 있습니다.

구매宝贝：< 스팬>

내 타오바오:

社구역:

에 해당하는 CSS는

.반단어 {너비: .5em;}
.두 단어{너비: 2em;}

테스트 후 합격했습니다.

--분할--

위의 두 가지 방법에 대해서는 개인적으로 실제 상황에 따라 고려해봐야 한다고 생각합니다. 예를 들어, 첫 번째 방법은 특정 고정 너비 글꼴에 의존하지만 다른 추가 구조를 추가하지 않으므로 향후 유지 관리에 더 편리합니다. 두 번째 방법은 실제 응용 프로그램 상황을 더 많이 고려합니다. 특정 고정 폭 글꼴에 의존하지만) 추가 구조도 추가합니다.

따라서 향후 유지 관리 가능성을 고려하고 "의미론적" 관점에서 분석하는 경우 첫 번째 접근 방식을 권장합니다. 실제 적용 상황에서 적용이 더 복잡해야 할 경우 개인은 두 번째 것을 선택하게 됩니다.