内联div宽度问题

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中表现相同。

我将表格单元格更改为该区域的1/3-ish（34以避免在移动时出现黑色边框）：

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

IE不能容纳100％宽度的所有细胞。但是当更改为34％时，它显示-moz-linear-gradient背景颜色（灰色）。由于后备背景并在原始css上找到，因此在IE上悬停是有问题的。我删除了那些，它在这里工作。如果你可以保持简单的颜色，那么删除这些样式可能是解决方案。