带有动画省略号文本的 Chrome 错误会改变颜色。文本向右移动

Question

这是我遇到的问题的一个示例。单击中间的锚点会使其向右移动。

var anchors = document.getElementsByTagName('a');

var onSelect = function () {
  var i, a;
  for (i = 0; i < anchors.length; i += 1) {
    a = anchors[i];
    if (a === this)
    	continue;
    a.classList.remove('selected');
  }
	this.classList.toggle('selected');
};

(function () {
  for (var i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener('click', onSelect);
  }
}());

.table {
  display: table;
  background-color: indigo;
  width: 600px;
}

.row {
  display: table-row;
  background-color: seagreen;
}

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

a {
  padding: 10px;
  background-color: lightblue;
  display: inline-block;
  transition: 0.5s ease;
  width: 140px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: black;
}

a.selected {
  background-color: blue;
  color: white;
}

<div class="table">
	<div class="row">
    <div class="cell">
      <a href="#">A New Hope</a>
    </div>
    <div class="cell">
      <a href="#">The Empire Strikes Back</a>
    </div>
    <div class="cell">
      <a href="#">Return of the Jedi</a>
    </div>
  </div>
</div>

如果我不更改文本颜色或删除省略号，则不会发生。我只能在 chrome 中重现它，所以我认为这是该浏览器的问题。

想知道是否有已知的解决方法。我的 chrome 版本是 53.0.2785.143 m

jsfiddle 中的相同示例： https://jsfiddle.net/f5k8p3tv/

Answer 1

在锚元素上将display:inline-block 设置为display:block。

不知何故，它试图重新评估它的“内联”位置并导致它移动。 由于您使用的是表格，因此不需要内联功能，因为每个元素在表格行中都有固定的位置。

var anchors = document.getElementsByTagName('a');

var onSelect = function () {
  var i, a;
  for (i = 0; i < anchors.length; i += 1) {
    a = anchors[i];
    if (a === this)
    	continue;
    a.classList.remove('selected');
  }
	this.classList.toggle('selected');
};

(function () {
  for (var i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener('click', onSelect);
  }
}());

.table {
  display: table;
  background-color: indigo;
  width: 600px;
}

.row {
  display: table-row;
  background-color: seagreen;
}

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

a {
  padding: 10px;
  background-color: lightblue;
  display: block;
  transition: 0.5s ease;
  width: 140px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: black;
}

a.selected {
  background-color: blue;
  color: white;
}

<div class="table">
	<div class="row">
    <div class="cell">
      <a href="#">A New Hope</a>
    </div>
    <div class="cell">
      <a href="#">The Empire Strikes Back</a>
    </div>
    <div class="cell">
      <a href="#">Return of the Jedi</a>
    </div>
  </div>
</div>