9

これは私を夢中にさせています。div.down_arrow下の要素の高さを制御できないようです-

...
<div id="filters">
    ...
    <span>All</span>
    <div class="down_arrow">
        <img src="images/down_arrow.png" alt=""/>
    </div>
    ...
</div>
...

私は次のCSSを持っています-

#filters {
    float: right;
    padding: 24px 10px 0 0;
}

#filters div {
    display: inline;
}

#filters div.down_arrow,
#filters div.down_arrow img {
    height: 12px;
    width: 23px;
}

#filters div.down_arrow:hover ing {
        opacity: 0;
}

サファリ開発ツールは、私の高さと幅div.down_arrowがまだ影響を及ぼしていることを教えてくれます（つまり、属性を通る線はありません-他に何もオーバーライドされていません）。ただし、画面上の小さなポップアップには、のサイズdiv.down_arrowが27pxx16pxであることが示されています。要素が含まれている要素よりも大きいことがわかりimgます。

何が起こっているのかわかりません-高さは前のスパン要素から取得されているようです（そして、幅に何が影響しているのかわかりません）。

4

2 に答える 2

14

display: inline;に変更display: inline-block;

問題は、インライン要素ではなく、ブロック要素の幅/高さを手動でのみ制御できることです。

于 2013-01-15T11:40:46.297 に答える
2

インライン要素は高さの影響を受けません

于 2013-01-15T11:40:36.440 に答える