Question

我今天遇到了一个奇怪的，实际上浪费了我很多时间，因为我首先想到的是我在Drupal上升级的一些模块或一些代码更改。事实上，它与谷歌Chrome浏览器的更新有关。

目前Google Chrome的最新版本为44.0.2403.89。我以前运行的版本是43.0.2357.132。我网站上的表格显示得很好。实际上，经过几个小时的故障排除后，我想用Safari检查网站，确定有足够的东西像往常一样显示。然后我检查了Firefox，也没问题，并显示为它。所以谷歌似乎已经改变了一些东西，导致表格中断。知道发生了什么以及我如何解决它，或者这是最新Chrome版本的错误？

以下是Chrome破解的表格示例：

http://www.yoninja.com/jp/browse/results/taxonomy%3A74

查看中间列的表如何在右侧栏下流动。如果您使用之前版本的Chrome（43.0.2357.132）查看此页面，则会显示正常。在Safari和Firefox的最新版本中也显示完美。是什么给了什么？！？

*更新* 所以我通过使用Drupal的View Theming并修改views-view-table - （viewname）.tpl.php文件并编辑包含长文本的列的列宽来暂时修复它。即使指定表格宽度，无论是百分比还是特定宽度（以像素为单位），在最新的Google Chrome中都不起作用。

<table class="<?php print $class; ?>"<?php print $attributes; ?> style="width:770px;">

<table class="<?php print $class; ?>"<?php print $attributes; ?> style="width:100%;">

这两项工作都没有，指定100％不会改变一件事。实际上，以像素为单位指定宽度确实会更改表的宽度，但不会更改指定的宽度。奇怪！为什么Google的更新会改变之前已经有效的内容的行为？

无论如何，我能够让事情发挥作用的唯一方法是在其中一个答案中指定列的宽度，如下所述。但是，我仍然认为这是不必要的，似乎每个其他浏览器仍然正确显示表。所以问题是，谷歌会解决这个问题吗？

有没有人可以在不指定表格宽度的情况下完成这项工作。我在各种页面中使用此视图，并且我不想担心指定宽度。

Answer 1

这确实被报道为一个错误。

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=512872

此错误似乎适用于已指定宽度的表，但依赖于具有大量文本的单个表格分区的自动宽度计算。它错误地计算了包含大量文本的宽度表分区。受影响的行现在超出了表的边缘，从而在视觉上破坏了列对齐。

在Chrome的有效更新修复此问题之前，您可以应用我之前发布的工作。

您需要手动指定包含大量文本的表格分区的宽度（而不是表格本身）。这将覆盖无效计算并防止表格行扩展超出表格的宽度。

我已经在表格分区上使用内联宽度说明符对其进行了测试，其中包含大量文本。

<table>
  <tr>
    <td>
      some stuff
    </td>
    <td width='30%'>
      some other large text field whose width isn't calculated properly
    </td>
  </tr>
</table>

Answer 2

我也经历过这个问题。确实似乎是从43到44的更新改变了布局行为。我的网站使用自动布局来重新调整宽度，不再适用。我们网站的修复是在表格分区上设置一个较大的文本字段宽度和一个内联宽度元素。

您的里程可能会有所不同。

<table>
    <tr>
        <td>
            some stuff
        </td>
        <td width='30%'>
            some other large text field whose width isn't calculated properly
        </td>
    </tr>
</table>

Answer 3

在包含宽度为100％（或使用引导程序表类）的html表的Chrome 44.0.2403.89更新页面之后，如果任何列包含“长”字符串，则不再遵循100％宽度（甚至如果字符串包含空格）。这是新行为，我已经确认它与44更新直接相关。希望如果有足够的人发布它将得到修复。

Answer 4

我遇到了破坏页面布局的相同问题。

但是，我实际上在表上使用了固定宽度的CSS属性。

表格的宽度明显大于指定的宽度。（I.E.，它溢出。）

使用JS查询表的宽度会返回CSS宽度集，而不是实际宽度。

HTML表格使用最新的Chrome浏览器44.0.2403.89打破布局

4 个答案: