목록 스타일:CSS 재설정에 없음

저자：Eve Cole 업데이트 시간：2010-05-22 15:52:43

알고 보니 직장에서 UL 목록에서 비정상적인 동작을 본 적이 있습니다.
게다가 어제 http://bbs.blueidea.com/thread-2984871-1-1.html 이라는 글을 보고 리스트스타일의 다양한 속성을 테스트해 본 결과 흥미로운 현상을 발견했습니다.

먼저 CSS 매뉴얼의 리스트 스타일에 대한 설명을 살펴보겠습니다.

정의 및 사용법
목록 스타일 단축 속성은 하나의 선언에서 모든 목록 속성을 설정합니다.

설명하다
이 속성은 다른 모든 목록 스타일 속성을 포괄하는 단축 속성입니다. 목록 항목 표시가 있는 모든 요소에 적용되므로 일반 HTML 및 XHTML의 li 요소에만 사용할 수 있지만 실제로는 모든 요소에 적용할 수 있으며 목록 항목 요소에 상속됩니다.
다음 속성을 순서대로 설정할 수 있습니다.
•목록 스타일 유형
•목록 스타일 위치
•목록 스타일 이미지
값 중 하나를 설정할 필요는 없습니다. 예를 들어 "list-style:circle inside;"도 허용됩니다. 설정되지 않은 속성은 기본값을 사용합니다.
기본값: 디스크 외부 없음

일상 작업에서는 목록 기호를 숨기기 위해 ul 및 li에서 CSS 재설정을 수행해야 하는 경우가 많습니다.
가장 일반적으로 사용되는 작성 방법은 Ul,li,ol{list-style:none;}입니다(어떤 사람들은 ul,li,ol{list-style-type:none;}도 사용함).

IE6, 7, 8, FF에서는 이 페이지에 문제가 없습니다.

그러나 우리가 무시할 수 없는 것은 list-style: 에 세 가지 속성이 있다는 것입니다:

목록 스타일 유형
목록 스타일 위치
목록 스타일-img

이 세 가지 속성에 주의를 기울이지 않으면 목록 스타일이 때때로 문제를 일으킬 수 있습니다.

예를 들어, ul이 부동 후에 IE6의 이중 여백 문제를 해결하기 위해 display:inline이 필요한 경우 이상한 일이 발생합니다.

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}

위 페이지는 IE8과 ff에서는 여전히 정상이지만, IE6과 7에서는 ul과 li 사이에 거리가 있습니다.
list-style:none을 정의하면 목록 기호가 표시되지 않지만 IE6 및 7에서는 해당 위치가 여전히 남아 있음을 알 수 있습니다.
이 UL이 FF에 어떤 속성을 가지고 있는지 확인하세요.

그림에서 볼 수 있듯이 CSS에 list-style:none을 정의하면 list-style-position에는 아무런 영향을 미치지 않습니다. 이는 여전히 FF 브라우저의 기본 설정이며 값은 외부입니다.
IE6 및 7에서는 list-style-position: inside가 기본값일 가능성이 높습니다.
이를 확인하기 위해 list-style:none을 none 내부의 list-style:none으로 변경하고 다시 테스트했습니다.

실행한 후에는 IE6 및 7에서 list-style:none과 정확히 동일하게 동작하는 것을 확인할 수 있습니다.
따라서 IE6 및 7에서는 UL에 float:left 및 display:inline 속성이 있고 list-style:none이 설정된 경우 list-style-position도 기본적으로 inside로 설정되어 있다고 추측합니다.

그래서 제가 내린 결론은 IE6 및 7에서 UL에 float:left;display:inline;:이 없을 때입니다.
list-style:none 속성이 있는지 여부에 관계없이 목록 기호는 숨겨지며 공간을 차지하지 않습니다(아래 코드의 5, 6).
UL에 float:left;display:inline 속성이 있는 경우
list-style:none, 목록 기호는 숨겨져 있지만 위치는 여전히 남아 있습니다(list-style-position:inside)(아래 코드의 UL1, ul3).
list-style:none이 설정되지 않았습니다. 목록 문자가 숨겨지고 위치를 차지하지 않습니다(list-style-position:outside)(코드 UL4).

UL02는 테스트에 참여한 모든 브라우저에서 비교적 좋은 성능을 보였습니다.

이 마지막 코드 조각은 다양한 상황에서 목록 스타일의 성능, 특히 IE6 및 7에서 4, 5, 6의 성능을 비교합니다.

코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>목록 스타일: none 또는 list-style:none 외부 none;</title> <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font :bold 16px/180% arial;} div{float:left;display:inline;배경:#eee;margin:0 10px 10px 0;} p 스팬{text-장식:line-through;} ul{너비:275px; 여백:4px 0 0 15px;배경:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{list-style:none 외부 없음;} .ul03,.ul03 li{list-style:none 내부 없음;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{list- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; </p> <ul class="ul01"> <li><a href="#">순수한 말, 이상한 꿈, 급한 생각</a></li> <li><a href="#" > 사랑과 마찬가지로 요구 사항도 거의 완벽합니다.</a></li> <li><a href="#">캠퍼스의 희미한 젊고 순수한 소년 소녀</a></li> <li> < a href="#">주저하고 머뭇거리며 거리감을 잃은지 오래</a></li> <li><a href="#">그녀의 얼굴을 바라보며 익숙한 것과 낯선 것을 낭송하며 단어 구절</a></li> <li><a href="#">이 단어는 소녀의 정신을 완벽하게 묘사합니다.</a></li> <li><a href="#"> 인터레이스 빛과 어둠의 단서, 그리고 불확실한 주인공</a></li> <li><a href="#">미묘하고 진심이 담긴 감정이 점차 드러나 몰입감을 준다</a></li> <li ><a href ="#">고밀도 감정이 텍스트에서 반복적으로 발효됩니다.</a></li> </ul> </div> <div> <p>2:float:left;display:inline; none before none;</p> <ul class="ul02"> <li><a href="#">순수한 말, 이상한 꿈, 급한 생각</a></li> <li ><a href= "#">사랑과 마찬가지로 요구사항도 거의 완벽하다</a></li> <li><a href="#">교내의 희미한 청춘과 청순한 소년 소녀들</a ></li> <li><a href="#">더 이상 거리감이 느껴지지 않을 정도로 머뭇거린다</a></li> <li><a href="#">그녀를 바라보며 낯익으면서도 낯설게 말하는 얼굴 구절</a></li> <li><a href="#">이 단어는 소녀의 정신을 완벽하게 묘사합니다.</a></li> <li> <a href="#">인터레이스 조명 그리고 어두운 단서들과 불확실한 주인공들</a></li> <li><a href="#">미묘하고 진지한 감정들이 점차 몰입감을 더해간다</a> a></li> <li><a href= "#">고밀도 감정이 텍스트에서 반복적으로 발효됩니다.</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none inside none;</p> <ul class="ul03"> <li><a href="#">순수한 말, 이상한 꿈, 급한 생각</p> a></li> <li><a href ="#">사랑처럼 요구 사항도 거의 완벽합니다</a></li> <li><a href="#">교내의 빛 젊고 순수한 소년 소녀</a></li> <li><a href="#">머뭇거리고 머뭇거리며 거리감을 잃은 지 오래</a></li> <li><a href= "#">그녀의 얼굴을 바라보며 친숙하면서도 익숙하지 않은 구절을 낭송하는 것</a></li> <li><a href="#">이 단어는 소녀의 영혼을 완벽하게 묘사합니다.</a ></li> <li><a href="#"> 엇갈린 빛과 어둠의 단서와 불확실한 주인공</a></li> <li><a href="#">섬세하고 진지한 감정이 점차 부각되면서 몰입감이 높아진다</a></li> <li><a href ="#">고밀도 감정이 텍스트에서 반복적으로 발효됩니다</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no CSS Reset< /p> <ul class="ul04"> <li><a href="#">순수한 텍스트, 이상하고 꿈같은 질주하는 생각</a></li> <li><a href="#">그냥 좋아요 사랑, 요구 사항은 거의 완벽합니다.</a></li> <li><a href="#"> 캠퍼스의 희미한 젊고 순수한 소년 소녀</a></li> <li><a href ="#">주저하고 머뭇거려 더 이상 거리감이 느껴지지 않는다</a></li> <li> <a href="#">그녀의 얼굴을 바라보며 익숙하면서도 낯선 시를 낭송하며< /a></li> <li><a href="#">이 단어는 소녀의 영혼을 완벽하게 묘사합니다</a></li> <li><a href="#">교차된 빛과 어둠의 단서와 불확실한 주인공</a></li> <li><a href="#">섬세하고 섬세한 진심이 점점 드러나 몰입감이 커진다</a></li> <li><a href="#" >고밀도 감정이 텍스트에서 반복적으로 발효됩니다.</a></li> </ul> </div> <div> <p>5: 표시 없음, 부동 속성 목록 스타일이 없음;</p> < ul class="ul05"> <li><a href="#">순수한 텍스트는 이상합니다. 몽환적이고 성급한 생각</a></li> <li><a href="#">사랑처럼 요구 사항이 거의 완벽합니다.</a></li> <li><a href=" #">교내의 희미한 젊고 순수한 소년 소녀</a></li> <li><a href=" #">주저하고 머뭇거리며 거리감을 잃은 지 오래다</a></li> <li><a href="#">그녀의 얼굴을 바라보며 익숙하면서도 낯선 시를 읊으며</a ></li> <li><a href="#">이 단어는 소녀의 영혼을 정확하게 묘사합니다</a></li> <li><a href="#">교차된 빛과 어둠의 단서와 불확실한 주인공 </a></li> <li><a href="#" >미묘하고 진지한 감정이 점차 드러나 몰입감이 커진다</a></li> <li><a href="#">고밀도 감정은 텍스트에서 반복적으로 발효됩니다.</a></li> < /ul> </div> <div> <p>6: 표시 없음, 부동 속성 없음 list-style:none;</p> <ul class= "ul06"> <li><a href="#"> 순수한 말, 이상한 꿈, 급한 생각</a></li> <li><a href="#">요구사항도 사랑과 마찬가지로 완벽하다</a></li> <li>< a href="#">교내의 희미한 젊고 순진한 소년 소녀들</a></li> <li><a href="#">I 머뭇거리고 머뭇거리며 거리감을 잃은 지 오래다</a> </li> <li><a href="#">그녀의 얼굴을 바라보며 익숙하면서도 낯선 시를 낭송</a></li > <li><a href="#">그 말이 딱 맞습니다. 소녀의 영혼을 완벽하게 묘사합니다</a></li> <li><a href="#">교차되는 빛과 어둠의 단서와 불확실한 주인공 </a></li> <li><a href ="#">미묘하고 진지한 감정이 점차 드러나 몰입감이 커진다</a></li> <li><a href="#">고밀도 텍스트에서 감정이 반복적으로 발효됩니다.</a>< /li> </ul> </div> </body> </html>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

위 코드의 성능 결과를 비교하면 다음과 같습니다.
Firefox에서는 list-style-type이 없음인 한 list-stype-position 값이 외부이든 내부이든 관계없이 목록 스타일을 잘 숨길 수 있습니다. IE6 및 7에서는 list-style:none만 설정됩니다. . , 모든 문제를 해결하기에는 충분하지 않으므로 CSS 재설정 시에는 none 외부에서 list-style:none을 사용하는 것이 더 좋다고 생각합니다.