Chrome 45版本中的绝对定位问题

Question

我的mvc应用程序有kendo网格，我已经使用了position:absolute;来冻结列，即对于表格的tr:firstChild，td:firstChild。 最近，在我们的服务器上升级到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解决这个问题？

- sarvesh kushwaha

---

错别字？ “fisrtchild” - Paulie_D

是的，这是打字错误，先生... - sarvesh kushwaha

如果你的代码在版本44中没有问题，尝试更新到新的版本45.0.2454.93 m。在我的情况下，这个bug已经被修复了 :) 希望这可以帮到你。祝好！ - typo_

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与表格相关的问题如下：

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

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

- Christopher Bair

---

我还发现，如果一个th/td单元格没有设置浮动属性，只需在CSS中添加float:inherit也可以解决这个问题。但是，该列中的所有单元格都需要进行此操作。 - Christopher Bair

嗨，Christopher，感谢您的回复。但是那对我也没有用。但是从某个地方我看到，将HTML中的空格替换掉可以解决这个问题，并且确实如此https://jsfiddle.net/j8fr2m1a/1。但在实际情况下，我失去了之前附加的网格事件，因为替换了空格:( - sarvesh kushwaha

Answer 2

我在Chrome Version 45.0.2454.85 m中遇到了类似的问题，这里有详细信息。我从mhodges44处得到了答案，并表示感谢。目前看来，更可能是一个bug；我仍在等待确认，我已在Chromium报告页面上开了一个票。

无论如何，回到你的问题，作为解决方法，请尝试添加css负边距，margin-left: -10px。如果这对你也有效，请告诉我们，我怀疑与@media screen and (-webkit-min-device-pixel-ratio:0)有关，导致了这种不良行为。

干杯！

- typo_