Firefox 또는 IE_HTML/Xhtml_Webpage Production에서 Span이 너비를 결정할 수 없는 문제에 대한 해결 방법

코드 복사

코드는 다음과 같습니다.

스팬 {
배경색:#ffcc00;
너비:150px
}
--><스타일 유형= "text/ css" mce_bogus="1">span {
배경색:#ffcc00;
너비:150px;
} 🎜>< ;body>
고정된 width



테스트 통과 후 , Firefox나 IE에서는 작동하지 않는 것으로 나타났습니다.

CSS2 표준의 너비 정의를 참고하여 CSS의 원래 너비 속성이 항상 유효한 것은 아니라는 사실을 발견했습니다. 개체가 인라인 개체인 경우 너비 속성이 무시됩니다. Firefox와 IE는 원래 다음 표준에 따라 이를 수행했습니다.


span을 블록 유형으로 수정하고 float를 설정하는 것은 완벽한 솔루션이 아닙니다

span의 CSS에 표시 속성을 추가하고 너비가 다음과 같도록 범위를 블록 유형 요소로 설정합니다. 올바른 작동하지만 이전 텍스트와 다음 텍스트를 다른 줄로 구분하기도 합니다. 이런 식으로 스팬은 실제로 div가 됩니다.

코드 복사

코드는 다음과 같습니다.

span { background-color: #ffcc00; display:block; width:150px;}

많은 사람들이 특정 조건에서 실제로 문제를 해결할 수 있는 다른 CSS 속성을 추가할 것을 제안합니다. 예를 들어, 우리 예에서는 스팬 앞에 텍스트가 없으면 실제로 가능합니다. 하지만 있다면 앞과 뒤의 텍스트가 함께 연결되어 스팬은 두 번째 줄까지 실행됩니다.

코드 복사

코드는 다음과 같습니다.

span { background-color: #ffcc00;

display:block; float:left; width:150px;}

범위 너비 설정을 위한 완벽한 솔루션

다음 코드는 완벽합니다. 스팬 너비 설정 문제를 해결했습니다. 브라우저는 일반적으로 지원되지 않는 CSS 속성을 무시하므로 마지막에 display:inline -block 줄을 작성하는 것이 가장 좋습니다. 그러면 Firefox에서 향후 Firefox 3에 도달하면 이 줄이 다양한 버전과 호환될 수 있습니다. 동시에.

코드 복사

코드는 다음과 같습니다.

< ;!- -
span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block;}
-->