webkit 계열 브라우저에서의 width 속성을 퍼센트로 지정했을때의 오류

모바일용으로 디자인된 페이지를 작업하면서, 그 동안 해결하지 못하고 계속 궁금해 했던 문제를 드디어 해결했다.

다름이 아니라, 상단 메뉴바를 만들때, UL과 LI로 메뉴를 구성하다 보면 넓이를 도합 100%가 되도록 정확히 구성했음에도 불구하고, 100%를 차지하지 못하는 경우가 생긴다.

예를 들어, 메뉴가 3개라고 하면, 34%, 33%, 33%로 구성하거나, 33.33%로 새개 모두를 구성하게 된다.
그런데 이렇게 하면 아래 그림과 같이 오른쪽 끝에 빈 공백이 생긴다.

오른쪽 끝에 검정색 공백이 생겼다.

디자이너가 이와 같은 문제를 가지고 여러번 문의해 왔지만, 정확한 해결책을 찾지 못해 고심했다
그러다가 오늘, 본격적으로 이 문제를 짚고 나가야겠다는 생각을 했다.

문제는 webkit 계열 브라우저에서 width 속성을 퍼센트로 주었을때 발생하는것이었다.

아이폰 기준으로 320px의 넓이를 3등분하면, 106.666666.....px이 나온다. 아마도 webkit 계열 브라우저는 소수점 이하 값을 무시하고 넓이를 계산해서 렌더링하는것으로 보인다.
때문에, 소수점이 없이 정확히 떨어지는 퍼센트 값에 대해서는 정확하게 보여줄 수 있었던 반면, 소수점이 나오는 값에 대해서는 실제보다 작게 계산되어 여백이 생기는것 같다.

그렇다면, 이에 대한 해결책은 무엇일까?

약간의 꼼수 같지만, 위와 같은 스타일로 보기 싫은 공백 없이 메뉴바를 보여줄 수 있게 되었다.
최종 결과 화면은 아래와 같다.

깔끔하게 문제를 정리하게 되었다.