带有链接的列列表-Chrome浏览器中的项目在点击时会向下移动 [英] Column list with links - items move down on click in Chrome

问题描述

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

Column lists in Chrome have an odd bug: When you click the first link in a 1+ column (not the first column) then the item moves the column down by ~5px.

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

Is this a bug? Can I prevent it with some CSS rules?

经过测试的Chrome版本:39.0.2171.71 m

Tested Chrome version: 39.0.2171.71 m

在Chrome浏览器中进行测试(小提琴链接):

Test this in Chrome (fiddle link):

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>

推荐答案

从Chrome 39开始，锚定元素变为专注于点击，即触发onfocus事件并应用:focus样式.

As of Chrome 39, anchor elements become focused upon click, i.e. the onfocus event gets triggered and the :focus style gets applied.

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

Because :focus is now enabled when you click on the link, the default user agent style gets applied as well, i.e.

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

此轮廓不应影响多列渲染，但无论如何都会起作用，这是一个错误(

This outline should not influence the multi-column rendering, but it does anyway, which is a bug (fixed).

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

To fix the problem, simply add outline:0; to the a selector (http://jsfiddle.net/fa4auxkr/4/):

ul a {
    outline: none;
}

请注意，该轮廓用于辅助功能，因此请不要无故地应用此规则.

Note that the outline is used for accessibility, so don't apply this rule without reason.

这篇关于带有链接的列列表-Chrome浏览器中的项目在点击时会向下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！