CSS缩放大小和表格单元格内容

Question

如何让Internet Explorer根据其中的缩放内容调整表格单元格的大小？

Chrome显示了这一点：

IE11显示了这一点 - 标签根据旁边的缩放内容没有移动：

示例代码：

<table>
    <tr>
        <td>
            <input type="radio">
        </td>
        <td>
            <label>here's a label</label>
        </td>
    </tr>
</table>

<style>
input[type=radio] {
    zoom: 400%
}
</style>

这是一个显示问题的jsfildle： http://jsfiddle.net/SKjP3/1/

Answer 1

您可以使用CSS转换属性更改单选按钮，如下所示：

input[type=radio] {       
  -webkit-transform: scale(4);
  -moz-transform:    scale(4);
  -ms-transform:     scale(4);
  -o-transform:      scale(4);
  transform:         scale(4);     
  margin-right:20px;
}

这将在所有浏览器中放大4 = 400％，结果可能不是您所期望的，因为它取决于浏览器呈现

如果你添加

label{ margin-left:20px;}

然后标签将在所有浏览器中显示在相同位置，请检查fiddle