Question

我需要帮助才能弄清楚为什么会这样。似乎无法想出解决方案。

在JSFiddle中，悬停工作正常，但是当在没有jsfiddle的情况下在chrome中打开时，如果你将鼠标放在某些盒子上，那么盒子会部分消失。

HTML：

<html>
<body>
<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>
</div>
</body>
</html>

CSS：

.main-table-header{
color:#FFFFFF;
background:#000000;
border-top-left-radius:15px;
border-top-right-radius:15px;
width: 200px;
}
.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;
}
.main-table-header2{
color:#FFFFFF;
background:#000000;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}

将鼠标悬停在桌面上时，空格消失 - Chrome问题

0 个答案: