Chrome转换不顺畅

时间:2013-12-23 20:36:20

标签: html css google-chrome

所以似乎在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中,这样你就可以更好地理解我的问题了。

http://jsfiddle.net/F8VNN/

0 个答案:

没有答案