显示的不稳定行为：绝对显示中的表格单元格高度：表格（仅限Chrome）

I'm having some trouble with Chrome 61 and 59 (possibly other versions) behaving erratically.

我在使用Chrome 61和59（可能是其他版本）时出现问题。

The situation is as follows: in my flexbox layout, I have a section. This section contains a wrapper, which in turn contains an img and a textwrapper with a p element. The goal is to have the image cover the background, whilst the div covers the image and is click-through (pointer-events: none).

情况如下：在我的flexbox布局中，我有一个部分。本节包含一个包装器，它包含一个img和一个带有p元素的textwrapper。目标是让图像覆盖背景，而div覆盖图像并且是点击（指针 - 事件：无）。

In order to center the text vertically, I use a display:table on the textwrapper and display:table-cell on the p. This works fine in all browsers I've tested it with (IE11, FF56), but in Chrome it displays incorrectly until a page resize event (either by opening the developer console or by resizing the window). Chrome appears to not respect the height of the table cell without a resize event.

为了使文本垂直居中，我在textwrapper上使用display：table并在p上显示：table-cell。这在我用它（IE11，FF56）进行测试的所有浏览器中都可以正常工作，但在Chrome中，它会在页面调整大小事件之前显示不正确（通过打开开发人员控制台或调整窗口大小）。如果没有调整大小事件，Chrome似乎不会尊重表格单元格的高度。

To illustrate: before and after page resize (don't bother with the section alignment). The snippet below gives the exact same layout but with the expected behaviour, leaving me at a loss. I can also not find any inherited behaviour that may be the cause.

为了说明：页面调整大小之前和之后（不要打扰部分对齐）。下面的代码段给出了完全相同的布局，但具有预期的行为，让我不知所措。我也找不到可能是原因的任何继承行为。

The page is a child template of the genesis framework for Wordpress (in case that helps anyone). The fact that I cannot easily replicate the issue is mildly annoying to say the least.

该页面是Wordpress的起源框架的子模板（如果有帮助的话）。事实上，我不能轻易地复制这个问题，至少可以说是有点烦人。

section {
  width: 400px;
  height: 267px;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.description {
  position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(11,60,93,0.6);
    color: #fff;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: table;
}

.text {
  vertical-align: middle;
    display: table-cell;
    text-align: center;
    font-size: 1.2em;
    height: 100%;
    padding: 20px 32px;
}

<section>
  <div class='wrapper'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Faust_bei_der_Arbeit.JPG/1920px-Faust_bei_der_Arbeit.JPG' class='image' width='400px'>
  <div class='description'>
    <p class='text'>
    Test
    </p>
  </div>
  </div>
</section>

1 个解决方案

#1

I checked your code snippet in Chrome and didn't see the problem you described.

我在Chrome中检查了您的代码段，但没有看到您描述的问题。

Also, there was no difference in the rendering of the code snippet, as far as I could see, among Chrome, Firefox and Edge.

此外，据我所知，Chrome，Firefox和Edge之间的代码片段呈现没有区别。

Putting all that aside, you said you need to vertically center text and are using this method:

把所有这些放在一边，你说你需要垂直居中文本并使用这种方法：

In order to center the text vertically, I use a display: table on the textwrapper and display: table-cell on the p.

为了使文本垂直居中，我在textwrapper上使用display：table并在p上显示：table-cell。

.description {
    display: table;
}

.text {
   vertical-align: middle;
   display: table-cell;
}

Instead of an old-school hack to accomplish vertical centering, try something clean and modern. Here's a flexbox alternative:

而不是一个老派的黑客来完成垂直居中，尝试一些干净和现代的东西。这是一个flexbox替代方案：

.description {
    display: flex;
    justify-content: center; /* horizontal alignment, in this case */
    align-items: center;     /* vertical alignment, in this case */
}

.text {  }

jsFiddle demo

More details: How to Center Elements Vertically and Horizontally in Flexbox

更多详细信息：如何在Flexbox中垂直和水平居中元素