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