Question

我有一个外部提供的表格图像，并希望在其前面添加一列。

图像和输入字段的高度设置为像素。因此，我希望缩放在两个元素上都相同。

我注意到图像缩放的颜色与文本不同。例如在Firefox中，如果行放大太多，行的高度会有错误。我该怎么办？

    <style type="text/css">
        .blubb {
            height:16px;
        }
    </style>

    <table cellpadding="0" cellspacing="0" style="width: 100%">
        <tr>
            <td valign="top">
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
                <input type="text" class="blubb" /><br />
            </td>
            <td valign="top">
                <img alt="" height="617" src="http://i.imgur.com/vS1RIi7.png" width="907" />
            </td>
        </tr>
    </table>

Answer 1

你无法以这种方式放大，并希望它能继续保持这种精确度。关键是，缩放对小数像素不起作用。它会对值进行舍入，因此如果您有一个16像素的高对象并且缩放到133％，它将是21像素高而不是21.3。当重复28次时，这些差异加起来了！

但是有一些方法可以使输入与图像中的行保持一致一个技巧是把它放在一个包含28个实际行的表中。所以没有<tr>，而是28个rowspan个，并将图片放在一个<tr> <td><input type="text" class="blubb" /></td> <td rowspan="28"><img alt="" width="907" height="617" src="http://i.imgur.com/vS1RIi7.png" /></td> </tr> <tr> <td><input type="text" class="blubb" /></td> </tr> <tr> <td><input type="text" class="blubb" /></td> ... etc.列中。

iframe

当你那样做的时候。每行将具有表格高度的1/28，这将与图像的高度相同，因此无论缩放因子是否导致舍入错误，这将始终排成一行。

请参阅updated fiddle。

文本和图像缩放是不同的

1 个答案: