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。上記の例は、JSFiddleで問題なく機能するようです。

4

1 に答える 1

0

ズームは、Webブラウザの比較的新しい機能です。あなたのウェブサイトのデザインはそれに依存すべきではありません。一方で、もちろん、それによって壊されるべきではありません。

1つの（非常に）迅速な修正は次のようになります。

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

ただし、より安定させるために、ボタンのデザインを一般的に変更することもできます。たとえば、ここのように、インスピレーションを得るためにWeb上の他のボタンを見ることができます。

于 2013-03-04T07:46:58.400 に答える