语义 UI 卡片高度问题（chrome 在 windows 上）

Question

我在 chrome 上遇到 windows 的问题，我的 .card 项目似乎没有达到正确的高度。它们得到的太多或太少会导致您在下面的屏幕截图中看到的问题。据我所知，这仅在 Chrome 上发生 Windows。

不会出现此问题的平台：

Internet Explorer 11
微软边缘
火狐
Chrome 在 mac

<div class="ui grid stackable container">
  <div class="sixteen wide column">
    <div class="ui link five doubling cards">
      <a class="ui card" href="#">
        <div class="image">
          <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">
        </div>

        <div class="content">
          <div class="header">Ivysaur</div>
          <div class="meta">Grass</div>
          <div class="description">

          </div>
        </div>
        <div class="extra content">
          <span><i class="idea icon"></i>Pokemon</span>
        </div>
      </a>
      <a class="ui card" href="#">
        <div class="image">
          <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">
        </div>

        <div class="content">
          <div class="header">Charmander</div>
          <div class="meta">Fire</div>
          <div class="description">

          </div>
        </div>
        <div class="extra content">
          <span><i class="idea icon"></i>Pokemon</span>
        </div>
      </a>

      ...

    </div>
  </div>
</div>

Answer 1

我在 my website 之一的生产中遇到了同样的问题。如果图像不在缓存中并且必须在最近更新后仅在 Chrome 下载，就会出现该错误。

我发现一个提交是关于css-flex 用于semantic-ui 来制作卡片的。 bug report 详细说明了问题和一些解决方法。
我选择将 min-height: 0; 添加到我的卡片内容中，它按应有的方式工作。

语义 UI 卡片高度问题（chrome 在 windows 上）

Semantic UI cards height issue (chrome on windows)

css

google-chrome

flexbox

semantic-ui