목록 스타일 유형이있는 정렬되지 않은 목록 : 없음; & list-style-position : 내부; Firefox에서 추가 공간이 필요합니다.

Question

글 머리 기호와 숫자를 전체 사이트의 목록 요소에있는 텍스트 내용과 적절하게 수직으로 정렬하고 싶습니다. 그래서 나는 항상 넣어 ..

ol, ul { list-style-position: inside; }

그러나 총알은 내가 사용, 제거 할 수 있습니다 ul 섹션의 경우

가 ..

ul.nobullet { list-style-type: none; }

이 크롬, 오페라 & Safari에서 완벽하게 작동 .

그러나 Firefox의 경우 간단 list-style-type: none;이 제대로 작동하지 않는 것 같습니다. 글 머리 기호는 사라져야하지만, li 요소의 왼쪽에 바로 간격 (공간)이 남아 있습니다. 차이를 제거하려면 ul.nobullet에 list-style-position: outside;을 추가해야합니다.

제 질문은 왜 파이어 폭스에서 이런 일이 발생 했나요? 내가 누락되었거나 잘못하고있는 것이 있습니까?

다음은 샘플 코드입니다. Firefox와 Chrome 모두에서 li 항목과 주위의 빨간색 경계 인 ul 사이의 간격을 확인하십시오.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-position: inside; 
 
    border: 1px solid red; 
 
} 
 

 
.box { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
}  
 

 
.nobullet { 
 
    list-style-type: none; 
 
}

<div class="box"> 
 
    <div><strong>Library Stats</strong></div> 
 
     <ul class="nobullet"> 
 
      <li>line 1</li> 
 
      <li>line 2</li> 
 
      <li>line 3</li> 
 
      <li>line 4</li> 
 
      <li>line 5</li> 
 
     </ul> 
 
</div>

Answer 1

알 수 있습니다.

Firefox 29.0.1을 사용하고 있습니다. 어느 날 이걸 보여 줬어 :

최신 Firefox 35.0.1로 업데이트되었습니다. 그리고 그것은 내게 이것을 보여주고 있습니다 :

제가 이것을 Firefox의 픽스라고 부를 수 있다면, 분명히 이전 버전의 버그 였을 것입니다.

Answer 2

그것은뿐만 아니라 파이어 폭스입니다.

UPDATE

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

:

가 나는 점을 발견하여 코드를 읽기 더 올바른 방법은 패딩을 제거하는 것입니다. 패딩 0을 여기에 설정합니다 :

* { 
    padding: 0; 
    margin: 0; 
} 

목록에 영향을줍니다. padding: 0을 제거하지 않으면 list-style-position이 문제를 해결하지 못합니다.