•  09-06-2019
  •  | 
  •  

문제

CSS를 사용하여 Firefox에서 SPAN 태그의 높이를 지정하려고했지만 수락하지 않습니다 (IE는 충분히 재미있게도).

Firefox는 DIV를 사용하면 높이를 허용하지만 DIV를 사용할 때의 문제는이 특정 인스턴스에서는 가질 수없는 성가신 줄 바꿈입니다.

나는 DIV에 대해 

display: inline
의 CSS 스타일 속성을 설정하려고 시도했지만 Firefox는 어쨌든 SPAN 동작으로 되돌아 가고 높이 속성을 다시 한 번 무시합니다.

도움이 되었습니까?

해결책

라코 디스

div의 1과 2를 담는 컨테이너가 크기가 맞을만큼 넓다면 괜찮습니다.

다른 팁

모든 요소를 display: inline-block로 설정하여 높이 또는 너비를 수신 할 수 있습니다.또한 요소에 다른 "블록 스타일"을 적용 할 수도 있습니다.

하지만주의해야 할 점은 Firefox 2가이 속성을 지원하지 않는다는 것입니다.Firefox 3는이 속성을 지원하는 최초의 Mozilla 기반 브라우저입니다.Internet Explorer를 포함한 다른 모든 브라우저는이 속성을 지원합니다.

inline-block는 쿼크 모드에서 실행중인 경우 Firefox의 요소 내부에서 텍스트 정렬을 설정할 수 없습니다.내가 아는 한 다른 모든 브라우저는 이것을 허용합니다.쿼크 모드로 실행하는 동안 텍스트 정렬을 설정하려면 -moz-inline-stack 대신 inline-block 속성을 사용해야합니다.이 속성은 Mozilla 전용 속성이므로 Mozilla 만이를 가져 오도록 브라우저 감지를 수행해야하며 다른 브라우저는 표준 유전자 태그 코드를 가져야합니다.

인라인 요소는 이와 같은 높이 (너비)를 가질 수 없습니다.SPAN은 기본적으로 이미 display: inline입니다.이 경우 Internet Explorer는 실제로 깨진 브라우저입니다.

인라인으로 표시하므로 높이는 line-height 속성의 높이로 설정되어야합니다.

레이아웃 방식에 따라 항상 float : left 또는 float : right를 span / div에 사용하여 줄 바꿈을 방지 할 수 있습니다.하지만 문장 중간에 넣으려면 해당 옵션이 없습니다.

문제는 'display : inline'이 연결된 높이를 가져올 수 없다는 것입니다. 인라인이기 때문에 콘텐츠에서 높이를 가져 오기 때문입니다.어쨌든, 선 끝에서 끊어진 상자의 높이를 어떻게 정의합니까?

대신 'line-height'를 설정하거나 만족스럽지 않으면 패딩을 설정해보세요. 라코 디스

display: block;로 설정된 경우 범위 요소의 높이 (및 너비) 만 변경할 수 있습니다.이는 일반적으로 인라인 요소이기 때문입니다.div는 일반적으로 display: block;로 설정됩니다.

해결책은 다음을 사용하는 것입니다. 라코 디스

스팬 높이를 설정하려면 다음이 Firefox에서 작동해야합니다. 라코 디스

요소 내부의 텍스트 정렬은 패딩 및 블록 인라인 속성을 사용하여 조정할 수 있습니다.디스플레이 : 인라인 블록;padding-top : 3px;예 :

height in em= relative line-height

예 : height:1.1em가있는 line-height:1.1

= 100 % 채워짐

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top