0

有人能建议我为什么用 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 中似乎可以正常工作。

4

1 回答 1

0

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

一个（非常）快速的解决方法可能是：

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

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

于 2013-03-04T07:46:58.400 回答