0

私は次のHTMLを持っています:

<ul style="float: right; margin-left: 5px;" id="status-infos">

   <li><a id="A"class="button sprite-arrow-circle" ></a></li>
   <li>
      <a id = "B" class="button">
         <img width="16" height="16" src="/Images/control-180.png">
      </a>
   </li>
</ul>

CSS:

.sprite-arrow-circle{ background-position: 0 0; width: 16px; height: 16px; }
.button { display: inline-block; }
.button, .form legend, .legend, .mini-menu {
   border: 1px solid white;
   border-radius: 0.417em 0.417em 0.417em 0.417em;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
   font-weight: normal;
   line-height: 1.333em;
   outline: 0 none;
   padding: 0.167em 0.5em 0.25em;
   text-decoration: none;
   text-shadow: none;
} 
a.button {
    background-color: transparent;
    background-image: url(/Images/sprite.png);
    background-position: 0 -396px;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

id=A リンクの上にはスペースがなく、下には大きなスペースがあります。

id=B リンクは、上下にスペースを空けて中央に垂直に配置されて表示されます。これは完璧に見えます。

誰が何が起こっているのか説明できますか？画像を含むリンクのみが正しい方法で垂直方向に配置されているようです。

4

1 に答える 1

0

でスケーリングするには、 CSS3 のbackground-sizeプロパティを使用する必要があります。CSS2 はbackground-image背景をクリップするだけで、スプライトの仕組みです。

于 2012-06-28T07:48:57.997 に答える