Chrome 45 版本定位绝对问题答案

【问题标题】：Chrome 45 Version Position absolute issueChrome 45 版本定位绝对问题
【发布时间】：2015-09-06 06:49:25
【问题描述】：

我的 mvc 应用程序有 kendo 网格，我使用 position:absolute; 作为我的表的 tr:firstChild, td:firstChild 来实现列冻结。最近，我们在我们的服务器上更新到 Chrome 45，在 Chrome 中，表格像和所有其他浏览器（包括以前版本的 Chrome）正在呈现我的表格格式正确 .

我什至无法检查我的 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 解决此问题？

【问题讨论】：

错字？ “第一个孩子”
是的，错字先生...
如果您的代码在版本 44 中没有问题，请尝试更新到新版本 45.0.2454.93 m。就我而言，该错误已修复:) 希望这会有所帮助。干杯

标签： jquery css google-chrome kendo-grid

【解决方案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 的表格问题是：

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

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

【讨论】：

我还发现，如果当前没有设置浮点数，只需将 float:inherit 添加到 th/td 单元格的 CSS 中，也可以解决此问题。但是一列中的所有单元格都需要这个。
嗨，克里斯托弗，感谢您的回复。但这对我也不起作用。但是从某个地方我看到从 html 替换空格可以解决问题，它确实做到了https://jsfiddle.net/j8fr2m1a/1 。但在真实场景中我丢失了在替换空格之前附加的网格事件:(

【解决方案2】：

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

无论如何，回到您的问题，作为一种解决方法，尝试简单地添加一个css 负边距margin-left: -10px。请让我们知道这是否也适用于您的情况，我怀疑与 @media screen and (-webkit-min-device-pixel-ratio:0) 相关的某些事情要对这种不当行为负责。

干杯

【讨论】：