1

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

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

经过测试的 Chrome 版本：39.0.2171.71 m

在 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>

4

2 回答 2

5

从 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;
}

请注意，大纲用于可访问性，因此请勿无故应用此规则。

于 2014-12-07T20:00:06.940 回答
4

这是有趣的行为！看起来与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>

于 2014-12-07T19:43:38.353 回答