Question

我的mvc应用程序有kendo网格，我使用((?=.*[^a-zA-Z])(?!\s).{4,})用于我的表＆tr; firstChild，td：firstChild来实现列冻结。最近，我们在服务器和Chrome中更新了Chrome 45，表格就像＆lt;（col1），（空格），（col2），（col3）＆gt;并且所有其他浏览器（包括以前版本的Chrome）都以正确的格式呈现我的表格＆lt;（col1），（col2），（col3）＆gt;。

我甚至无法检查我的chrome中的空白区域。

我发现的解决方案：

我写过一些CSS，即：

position:absolute;

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

@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;
    }
}

导致主要问题的原因是什么？我怎样才能使用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的表格问题是：

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

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

Answer 2

我在Chrome版本45.0.2454.85 m中遇到了类似的问题，暴露了here，我在mhodges44收到了答案 - 其他来源也是如此（特别感谢）。在这一点上，有更多的机会谈论一个错误;我还在等待确认，我已经在Chromium报告页面上打开了一张票。

无论如何，回到你的问题，作为一种解决方法，尝试简单地添加css负余量，margin-left: -10px。如果您的案例也适用，请告诉我们，我怀疑与@media screen and (-webkit-min-device-pixel-ratio:0)有关的事情应对这种不当行为负责。

干杯

Chrome 45版本位置绝对问题

2 个答案: