인라인 divs 너비 문제

Question

아래와 같은 레이아웃을 얻으려고하고 있으며 수정할 수없는 html 구조로 작업해야합니다.

바이올린은 아래의 비 IE 브라우저에서 잘 작동하지만 IE 9와 10은 각각의 버튼에 대한 100 % 스트레칭된다.

display : table 및 table-cell을 사용하고 있습니다. 각 단추의 100 % 너비가 문제를 일으키고 있다고 생각하지만 단추를 고르게 배치하고 텍스트와 호버를 올바르게 정렬하는 다른 솔루션을 찾을 수 없습니다.

HTML 구조를 변경할 수 없습니다.

.c-control-latch-buttons.tri-option-latch-buttons span.c-label { 
     display: table-cell; 
     width: 100%; 
    } 

http://jsfiddle.net/9seuhjmt/

나는 내가 지금 어떤 조언을 많이 감사 일을 복잡하게 이상 해요 느낌이 듭니다.

Answer 1

이 무엇입니까?

http://jsfiddle.net/9seuhjmt/19/

지금 내 IE 9와 크롬에서 같은 행동입니다.

난 (hoovering 때 어두운 경계선을 피하기 위해 34) 면적의 1/3의 틱에 대한 테이블 셀 변경 :

.c-control-latch-buttons.tri-option-latch-buttons span.c-label { 
    display: table-cell; 
    width: 34%; 

IE는 100 %의 폭을 갖는 모든 세포를 수용하지 않았다. 그러나 34 %로 변경하면 -moz-linear-gradient 배경색 (회색)이 표시됩니다. IE의 마우스 오버는 대체 배경 때문에 문제가되어 원래 CSS에서 발견되었습니다. 나는 그것들을 제거하고 여기서 일하고 있습니다. 일반 색상을 유지할 수 있다면 이러한 스타일을 제거하는 것이 해결책이 될 수 있습니다.