Question

Chrome中的列列表有一个奇怪的错误：当您单击1+列（而不是第一列）中的第一个链接时，该项会将列向下移动~5px。

这是一个错误吗？我可以使用一些CSS规则来阻止它吗？

经过测试的Chrome版本：39.0.2171.71 m

在Chrome (fiddle link)中对此进行测试：

＆＃13;

ul {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

＆＃13;

<ul>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 1</a>
  </li>
</ul>

＆＃13;

Answer 1

As of Chrome 39，锚定元素会在点击时变得专注，即onfocus事件会被触发并且:focus样式会被应用。

因为当您点击链接时现在启用了:focus，所以也会应用默认的用户代理样式，即

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

这个大纲不应该影响多列渲染~~，但无论如何，~~ （fixed）。

要解决此问题，只需将outline:0;添加到a选择器（http://jsfiddle.net/fa4auxkr/4/）：

ul a {
    outline: none;
}

请注意，大纲用于辅助功能，因此请不要无理由地应用此规则。

Answer 2

这是有趣的行为！当他们的父母在一个专栏中时，看起来与有display: inline的孩子有关。

将<a>更改为display: block可解决此问题。

没有错误示例

第一个列表有这种跳跃行为。带显示块链接的第二个列表，没有跳跃行为。

ul {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
.noJump a {
  display: block;
}

<h2>This is the jump problem</h2>
<ul>
  <li><a href="#">My siblings like to jump</a>
  </li>
  <li><a href="#">I love Jumping!</a>
  </li>
  <li><a href="#">I love Jumping!</a>
  </li>
</ul>

<h2>This has the jumped problem fixed with display: block</h2>
<ul class="noJump">
  <li><a href="#">No Jump</a>
  </li>
  <li><a href="#">No Jump</a>
  </li>
  <li><a href="#">No Jump</a>
  </li>
</ul>

包含链接的列列表 - 在Chrome中单击时向下移动项目

2 个答案:

没有错误示例