內聯divs寬度問題

Question

我想獲得如下的佈局，需要使用無法修改的html結構。下面

的小提琴工作正常非IE瀏覽器，但IE 9和10爲每個按鈕拉伸100％。

我正在使用display：table和table-cell。我認爲每個按鈕上的100％寬度都會導致此問題，但無法找到另一種均勻拉伸按鈕的解決方案，將文本對齊並正確地懸停。

我無法更改html結構。

http://jsfiddle.net/9seuhjmt/

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

我有一種感覺，我是在複雜的事情，所以任何建議大加讚賞。

Answer 1

這是你在找什麼？

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

它的表現同樣在我的IE 9和Chrome現在。

我改變了表單元格的區域的三分之一肥胖型（34吸塵器吸塵時避免深色邊框）：

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

IE未容納有100％的寬度的所有小區。但是，當更改爲34％時，它顯示-moz-linear-gradient背景色（灰色）。在IE瀏覽器上懸停是有問題的，因爲回退的背景和原始的CSS發現。我刪除了這些，它在這裏工作。如果你可以保持簡單的顏色，那麼刪除這些樣式可能是解決方案。