0

ウェブサイトに「返信」ボタンを作成しようとしています。このボタンの横には、追加のオプションを指定するためのドロップダウンボックスがあります。このようなもの：[返信] [v] [返信]

ボタンを作成できましたが、追加のオプションボタンに問題があります：使用したい画像を一貫して取得できないようです複数のブラウザに集中します。たとえば、Firefoxは画像を下に移動し、chromeは画像を上に移動します。（間隔の不一致を示すために、下の画像に赤い線を追加しました）問題を表示するための

リンク：

スパン内でこの画像を垂直方向に適切に中央に配置する方法（水平方向には正常に機能します！）を知っている人はいますか、またはボタンを作成する方法について別の提案がありますか？また、「矢印」ボタンの高さが「返信」ボタンと同じである（少なくとも外側の境界線も）ことが重要です。これは、私が試したいくつかの解決策によって「壊れた」ためです。また、複数の画像を含むpngから選択できるように、要素の「背景」プロパティの一部として矢印ボタンの画像を保持したいと思います。（効率上の理由から、サイト上のすべてのアイコンに対して1つの画像のみが読み込まれます）

この1ピクセルのスキューについては気難しいように聞こえますが、使用している線の高さによっては問題が悪化するようで、実際には格好悪いです。どんな助けでも大歓迎です。ありがとうございました！！

<div>
    <a href="#" class="link1"><span class="text">Reply</span></a><a href="#" class="link2"><span class="options"></span></a>
</div>

.link1{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 1px solid black;
    color: black;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
}

.link2{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 1px solid black;
    border-left: none;
    color: black;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
}

.text{
    margin: 0px 5px 0px 5px;
    padding: 0px 0px 0px 0px;
    font-size: 12px;
}

.options{
    margin: 0px 0px 0px 0px;
    padding: 0px 5px 0px 12px;
    background-image: url("arrow.png");
    background-position: 2px 3px;
    background-repeat: no-repeat;
    overflow: hidden;
}
4

1 に答える 1

0

利用可能なさまざまな方法を使用して、ブラウザごとに異なるスタイル/スタイルシートを使用するか、1 つの高さを設定してposition: absolute. ほとんどの場合、position: absolute;多くのブラウザーで問題を修正するのに適しています。例えば

position: absolute;
top: 10px;
left: 100px;

これにより、画像が 10 ピクセル下に移動し、100 ピクセル右に移動します (そうでない最も近い親要素に対して) position: fixed;

于 2012-09-12T03:37:51.970 に答える