0

Chromeでテストしています。私のボタンはズームなしで見栄えがします。

ズームなし

<li class="active" id="site_content">
      <a href="#" id="site_content_link">Edit Content</a>
</li>

拡大・縮小するとこんな感じ

ズームあり

CSSは次のとおりです。

.sub_nav ul li.active, .sub_nav ul li:hover {
background: url("/assets/sub_nav_right.png") no-repeat scroll right 0;
padding: 0 11px 0 0;

.sub_nav ul li {
display: block;
float: left;
line-height: 16px;
margin: 0 0 0 28px;
}

.sub_nav ul li.active a, .sub_nav ul li:hover a {
background: url("/assets/sub_nav_left.png") no-repeat;
color: #FFFFFF;
display: block;
padding: 5px 0 5px 11px;
text-shadow: none;
}

.sub_nav ul li a {
font-family: arial;
font-weight: bold;
line-height: 16px;
}

ここで jsfiddle を作成しました: http://jsfiddle.net/BdGA4/

4

2 に答える 2

0

右側のスプライトのサイズを大きくしました。幅が 11px から 16px になりました。両方のスプライトがオーバーラップするようになったため、ブラウザーがピクセルを丸めることに起因するズームのバグは表示されません。

Fixed fiddle

http://jsfiddle.net/BdGA4/2/

于 2013-02-18T15:26:38.347 に答える
0

最善の解決策は、sub_nav_left.png 画像を、水平 (repeat-x) 設定を有効にして幅 1 ピクセルの背景画像として「スライス」することです。これは、すべての場合にスペースを埋めます。

于 2013-02-18T14:21:59.040 に答える