2016-05-23 3 views
0

私は、インラインブロック選択要素が以下のように配置されているため、インラインブロックの選択要素を相対的に配置すると、パーセンテージで上部のオフセットプロパティを無視する(なぜなら、問題はありません)。 pタグがないと、オフセット%が機能します。しかし、pタグが戻ったら、top%は機能しません。ありがとう。インラインブロック位置がなぜですか:パーセンテージでのトップオフセットを無視した相対位置ですか?

html, body { 
 
    height: 100%; 
 
} 
 
select { 
 
    position: relative; 
 
    top: 10%; 
 
}
<body> 
 
    <p>some text</p> 
 
    <select> 
 
    <option>apples</option> 
 
    </select> 
 
    <p>some text</p> 
 
</body>

答えて

0

Firefoxの

  • top: 10%
    • inline-blockの作品はIEにクローム
    • では無視され、パーセンテージはページのロード時に解決されているようですウィンドウのサイズを変更してもウィンドウは更新されません。

    私はtopパーセンテージおよびdisplay: inline-blockに問題があるはずはないと思います。パーセンテージは、包含ブロックの高さに関して正確に解決できなければなりません(マージンとは異なり、topはオフセットのみを設定し、祖先には影響しませんので、循環定義はありません)。 containing blockは、そのブロックレベルまたはインラインレベルのどちらに依存するのではないので、どちらが機能しなければならないのか、そうでないのは理由がありません。

    回避策として

    、あなたはブロックなどのブロック要素の中にselect、またはスタイルをラップすることができます:

    html, body { 
     
        height: 100%; 
     
    } 
     
    select { 
     
        position: relative; 
     
        top: 10%; 
     
        display: block; 
     
    }
    <p>some text</p> 
     
    <select> 
     
        <option>apples</option> 
     
    </select> 
     
    <p>some text</p>

  • +0

    感謝を! Chromeがそれを無視する方法に興味があります。知りませんでした。 –

    関連する問題