Safari <li>文本在悬停时更改宽度

Question

在Safari 10.0.3（12602.4.8）中，简单的无序列表项会改变它的宽度，如果li元素具有悬停样式

HTML：

<ul class="cc-menu">
  <li>Apple</li>
  <li>Orange</li>
  <li>Pineapple</li>
</ul>

CSS：

.cc-menu {
  display: inline-block;
  background: #000;
  color: #fff;
}
.cc-menu li:hover {
  color: #888;
}

悬停之前：

悬停后：

的jsfiddle： https://jsfiddle.net/nresg4hr/

有没有办法避免这种行为？

Answer 1

到目前为止，我发现最好的解决方法是在css中为列表项声明自己的样式。

＆＃13;

＆＃13;

.cc-menu {
  display: inline-block;
  list-style: none; /* suppress browser list style */
  background: #000;
  padding: 0 0 0 24px;
  color: #fff;
}
.cc-menu li:hover {
	color: #888;
}
/* declare own list style */
.cc-menu li:before {
  content: '\2022';
  padding-right: 8px;
}

＆＃13;

<ul class="cc-menu">
  <li>Apple</li>
  <li>Orange</li>
  <li>Pineapple</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试这种风格

.cc-menu {
  display: inline-block;
  background: #000;
  color: #fff;
}
.cc-menu li:hover {
  color: #888;
  display:block;
}