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。注意这个＆＃34;垂直线＆＃34;不会出现在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。

在更大规模地查看网页时，谷歌浏览器中存在奇怪的视觉效果

1 个答案: