jquery - Chrome 45 版本位置绝对问题

Question

我的 mvc 应用程序有剑道网格，我已经为我的表的 tr:firstChild、td:firstChild 使用 position:absolute; 来实现列卡住。最近，我们已经在我们的服务器上更新到 Chrome 45，在 Chrome 中，表格会像 <(col1), (blank space), (col2), (col3)> 和所有其他浏览器(包括以前版本的 Chrome)正在呈现我的表格格式正确 <(col1), (col2), (col3)>.

我什至无法检查我的 chrome 中的那个空白区域。

我找到的解决方案:

我写了一些 CSS 即:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .tablexyz tbody th:first-child,
    .tablexyz tbody tr:first-child {
        position: relative;
        width: 240px;
        top: auto;
        left: 20px;
    }
}

然后我在我的页面中使用 jQuery 并手动将其设置为绝对并且它工作正常:

$(".tablexyz tbody th:first-child").css({
    position: "absolute",
    width:"240px",
    top:"auto",
    left : "20px"
});

导致主要问题的原因是什么？如何仅使用 CSS 解决此问题？

Answer 1

我找到了部分问题和可能的修复。

这是一个 jsfiddle 示例设置:

https://jsfiddle.net/j8fr2m1a/

<table border="1">
    <tr>
        <th>Alpha</th>
        <th>Beta</th>
        <th>Gamma</th>
    </tr>
    <tr>
        <td style="float:right;">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<br />

<table border="1">
    <tr>
        <th style="float:left;">Alpha</th>
        <th>Beta</th>
        <th style="float:left;">Gamma</th>
    </tr>
    <tr>
        <td style="float:right;">1</td>
        <td>2</td>
        <td style="float:right;">3</td>
    </tr>
</table>

<br />

<table border="1">
    <tr>
        <th>Alpha</th>
        <th>Beta</th>
        <th>Gamma</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<br />

<table border="1">
    <tr><th>Alpha</th><th>Beta</th><th>Gamma</th></tr>
    <tr><td style="float:right;">1</td><td>2</td><td>3</td></tr>
</table>

Chrome 45 的表格问题是:

如果应用于列中单元格的样式不相等，则具有额外样式的行将在其布局中出现幻像单元格。

要解决此问题，请删除额外的样式，将样式应用于列中的所有单元格(值不需要相同)，或删除表格行中单元格周围的空白。