所以似乎在IE中过渡是顺利的,没有错误。但是在FireFox和Chrome中,它有点模糊。火狐没那么多。
以下是我的HTML示例:
<table>
<thead>
<tr>
<th class="main-table-header">File Name</th>
<th class="main-table-header">File Size</th>
<th class="main-table-header">Date Added</th>
<th class="main-table-header"># Of Versions</th>
</tr>
</thead>
<!-- Beginning of dll list. -->
<tr name="new-dll-start">
<td class="main-table-body">DSWINSAT.dll</td>
<td class="main-table-body">10.KB</td>
<td class="main-table-body">04/05/2013</td>
<td class="main-table-body">4 Versions</td>
</tr>
<tr name="new-dll-start">
<td class="main-table-body">DxEngine32.dll</td>
<td class="main-table-body">1.03MB</td>
<td class="main-table-body">01/09/2012</td>
<td class="main-table-body">No Other Versions</td>
</tr>
<tr name="new-dll-start">
<td class="main-table-body">litezip.dll</td>
<td class="main-table-body">21.1KB</td>
<td class="main-table-body">06/08/2013</td>
<td class="main-table-body">4 Versions</td>
</tr>
<tr name="new-dll-start">
<td class="main-table-body">rasapi32.dll</td>
<td class="main-table-body">93.1KB</td>
<td class="main-table-body">12/09/2014</td>
<td class="main-table-body">3 Versions</td>
</tr>
<tr name="new-dll-start">
<td class="main-table-body">ecomwr.dll</td>
<td class="main-table-body">21.1KB</td>
<td class="main-table-body">10/10/2013</td>
<td class="main-table-body">2 Versions</td>
</tr>
<tr name="new-dll-start">
<td class="main-table-body">mfcuia32.dll</td>
<td class="main-table-body">43.9KB</td>
<td class="main-table-body">08/09/2001</td>
<td class="main-table-body">No Other Versions</td>
</tr>
<tr name="new-dll-start">
<td class="main-table-body">icuuc51.dll</td>
<td class="main-table-body">1.1MB</td>
<td class="main-table-body">06/09/2013</td>
<td class="main-table-body">1 Version</td>
</tr>
<!-- End of dll list. -->
<tfoot>
<tr>
<th class="main-table-header2">File Name</th>
<th class="main-table-header2">File Size</th>
<th class="main-table-header2">Date Added</th>
<th class="main-table-header2"># Of Versions</th>
</tr>
</tfoot>
</table>
示例CSS:
.main-table-body {
text-align:center;
background:#FFFFFF;
font-weight:bold;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
-moz-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
background-color: whitesmoke;
display:absolute;
padding: 2px;
}
.main-table-body:hover {
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
background-color: #e3e3e3;
}
我在SOF查看了其他一些帖子,其中很少与我使用的代码类型有关。我把它放在一个jsfiddle中,这样你就可以更好地理解我的问题了。