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

Question

Chrome中的列列表有一个奇怪的错误:当您单击1+列(而不是第一列)中的第一个链接时,该项目将列向下移动~5px.

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

经过测试的Chrome版本:39.0.2171.71米

在Chrome中测试此内容(小提琴链接):

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

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

Answer 1

从Chrome 39开始,锚点元素会在点击时变得集中,即onfocus触发事件并:focus应用样式.

因为:focus当您单击链接时现在已启用,因此也会应用默认的用户代理样式,即

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

这个大纲不应该影响多列渲染,但无论如何它都会影响,这是 一个错误(修复).

要解决此问题,只需添加outline:0;到a选择器(http://jsfiddle.net/fa4auxkr/4/):

ul a {
    outline: none;
}

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