snipt

Ctrl+h for KB shortcuts

CSS

Cross browser display_inline-block

/**
Hack for cross-browsing display:inline-block;

Seen on: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

**/
element
{
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 250px;
}
https://snipt.net/embed/e745d324d0d774fcf3d07ffee65efba4/
/raw/e745d324d0d774fcf3d07ffee65efba4/
e745d324d0d774fcf3d07ffee65efba4
css
CSS
19
2019-07-19T04:53:23
True
False
False
/api/public/snipt/3190/
cross-browser-display_inline-block
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">/**</span> </span><span id="L-2"><a name="L-2"></a><span class="c">Hack for cross-browsing display:inline-block;</span> </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a><span class="c">Seen on: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/</span> </span><span id="L-5"><a name="L-5"></a> </span><span id="L-6"><a name="L-6"></a><span class="c">**/</span> </span><span id="L-7"><a name="L-7"></a><span class="nt">element</span> </span><span id="L-8"><a name="L-8"></a><span class="p">{</span> </span><span id="L-9"><a name="L-9"></a> <span class="nb">width</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span> </span><span id="L-10"><a name="L-10"></a> <span class="nb">min-height</span><span class="o">:</span> <span class="m">250px</span><span class="p">;</span> </span><span id="L-11"><a name="L-11"></a> <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span> </span><span id="L-12"><a name="L-12"></a> <span class="nb">display</span><span class="o">:</span> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="nb">inline</span><span class="o">-</span><span class="n">stack</span><span class="p">;</span> </span><span id="L-13"><a name="L-13"></a> <span class="nb">display</span><span class="o">:</span> <span class="nb">inline</span><span class="o">-</span><span class="nb">block</span><span class="p">;</span> </span><span id="L-14"><a name="L-14"></a> <span class="nb">vertical-align</span><span class="o">:</span> <span class="nb">top</span><span class="p">;</span> </span><span id="L-15"><a name="L-15"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span> </span><span id="L-16"><a name="L-16"></a> <span class="n">zoom</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> </span><span id="L-17"><a name="L-17"></a> <span class="o">*</span><span class="nb">display</span><span class="o">:</span> <span class="nb">inline</span><span class="p">;</span> </span><span id="L-18"><a name="L-18"></a> <span class="n">_height</span><span class="o">:</span> <span class="m">250px</span><span class="p">;</span> </span><span id="L-19"><a name="L-19"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
cross-browser, css, display