Firefox 및 IE_Experience 교환에서 ul의 다양한 성능에 대한 솔루션

나는 최근에 ul과 관련된 oblog용 시스템 템플릿을 만들었기 때문에 이 기사와 이 큰 그림을 편집했습니다.
UL은 매우 흔히 사용되는 태그이지만 Firefox와 IE에서는 성능이 다르기 때문에 제어하기 어려운 태그라는 느낌을 갖게 됩니다.
Firefox에서는 ul에 여백 값이 있지만 여백 값은 없습니다. 반대로 IE에서는 ul에 여백 값이 있지만 여백 값은 없습니다. [아래 그림의 두 번째와 세 번째 예를 비교하면 알 수 있습니다.]
Firefox에서는 ul의 목록 스타일이 기본적으로 콘텐츠의 바깥 가장자리에 배치됩니다. 물론 CSS를 통해 콘텐츠의 안쪽 가장자리에 목록 스타일을 설정할 수도 있습니다.
절충을 통해 두 브라우저 모두에 적합한 설정을 얻었습니다: padding:0; list-style:inside; ul을 padding:0; margin:0; list-style:none;으로 설정한 다음 li에 배경 이미지를 추가할 수도 있습니다.

<style type="text/css"> body{font-size:12px; margin:20px; line-height:18px;} #box{width:200px; background-color:#CC9; border:#990 1px solid;} #box ul{padding:0; margin:0; list-style:inside decimal; } </style> <div id="box"> <ul> <li>첫 번째 문장입니다. </li> <li>두 번째 문장입니다. </li> <li>세 번째 문장입니다. </li> <li>네 번째 문장입니다. </li> <li>다섯 번째 문장입니다. </li> </ul> </div>
[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]