html - 以较大比例查看网页时，谷歌浏览器中出现奇怪的视觉伪像

Question

谁能告诉我为什么使用 Google Chrome 浏览器会出现这种奇怪的视觉伪像？

我有以下元素的 HTML:

<div class="subMenuSection">
<div class="subMenuGenTabs">
    <a class="subMenuButtonActv" href="123.htm">
    <span id="MainContent_LabelDownloads">Downloads</span></a>
</div>
</div>

还有这个 CSS:

.subMenuGenTabs
{
    border: none;
    padding: 0 10px 0 0;
    margin: 0;
    float: left;
    display: inline-block;
}
.subMenuSection
{
    border: none;
    padding: 0;
    margin: 24px 0 20px 0;
}

a.subMenuButtonActv
{
    background: transparent url('http://i150.photobucket.com/albums/s99/dc2000_bucket/btnsmgrn-rgt-on_zpsd38b307d.png') no-repeat scroll bottom right;
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Trebuchet MS,Sans-Serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    height: 30px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding-right: 18px;
    text-decoration: none;
    white-space: nowrap;
}
a.subMenuButtonActv span {
    background: transparent url('http://i150.photobucket.com/albums/s99/dc2000_bucket/btnsmgrn-lft-on_zps2896d5d5.png') no-repeat scroll bottom left;
    display: block;
    line-height: 20px;
    padding: 5px 0 5px 18px;
}
a.subMenuButtonActv:hover
{
    background-position: top right;
    outline: none; /* hide dotted outline in Firefox */
}
a.subMenuButtonActv:hover span {
    background-position: top left;
}
a.subMenuButtonActv:active
{
    background-position: top right;
    color: #000000;
    outline: none; /* hide dotted outline in Firefox */
}
a.subMenuButtonActv span:active {
    color: #000000;
    background-position: top left;
}

100% 缩放时看起来像这样:

这就是它在 Chrome 中放大 110% 时的样子:

PS1。请注意，此“垂直线”不会出现在 IE 或 Firefox 中。

PS2。在实际的 CSS 中，图像的 URL 是这样定义的:

background: transparent url('../Graphics/btnsmgrn-rgt-on_zpsd38b307d.png') no-repeat scroll bottom right;

PS3。上面的例子似乎在 JS Fiddle 中工作正常。

Answer 1

缩放是网络浏览器中一项相对较新的功能。您的网站设计不应该依赖于它。另一方面，当然，它也不应该被它破坏。

一个(非常)快速的解决方法可能是:

a.submenubuttonactv span {
  ...
  position: relative;
  right: -1;
}

但是，为了使其更稳定，也许可以更改您的按钮设计。您可以查看网络上的其他按钮以获取灵感，例如 here例如。