상자 사파리의 상자 크기 조정

Question

<ul>을 사파리로 균등하게 나눠서 인라인 <li> 요소가 너비의 100 %를 구성하는 데 어려움이 있습니다.

HTML 코드는 기본적 :이 같아

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    background-color: #9999ff; 
} 
li { 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    border-left: 1px solid #000; 
    width: 20%; 
    box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
} 
li:last-child { 
    border-right: 1px solid #000; 
} 

는 합계 (경계 포함)의 20 %를 차지 5 개 균등 공백리스트 요소를 만들 것이다 : CSS와

<ul> 
    <li>red</li> 
    <li>blue</li> 
    <li>green</li> 
    <li>orange</li> 
    <li>purple</li> 
</ul> 

너비 각각. Firefox와 Chrome에서 완벽하게 작동하지만 Safari는 추가로 6 픽셀 정도 남겨 둡니다. 상자 크기 조정 등록 정보를 제거하면 목록이 너무 길어집니다. 나는이 간단한 일을 내 삶의 일로 할 수없는 것처럼 보입니다.

여기 JSFiddle입니다 : http://jsfiddle.net/z2Xdf/7/

Answer 1

그것은 크롬에 나를 위해 길을 잘못 렌더링 된 ... 적어도 jsFiddle를 사용하여.

인라인 블록은 양쪽에 공백을 넣습니다. li 디스플레이에서 제거 : 인라인 블록 및 추가

display:block; 
float:left; 

또한 배경색을 ul에서 li로 변경하십시오.

는 디스플레이 유지하고 싶었다면 : 인라인 블록을, 당신은 분명히이 작업을 수행 할 수 있습니다 ...

<ul><!- 
    -><li>stuff</li><!- 
    -><li>stuff</li><!- 
-></ul> 

을하지만, 번거 로움 입력 좋아하는 것 같다?

여기 더 "hacks" (확인 의견) ...