mozilla

Compare Revisions

-moz-box-sizing

Change Revisions

Revision 137552:

Revision 137552 by Sheppy on

Revision 137553:

Revision 137553 by Jürgen Jeka on

Title:
-moz-box-sizing
-moz-box-sizing
Slug:
CSS/-moz-box-sizing
CSS/-moz-box-sizing
Tags:
css, "CSS Reference", "CSS:Mozilla Extensions"
css, "CSS Reference", "CSS:Mozilla Extensions"
Content:

Revision 137552
Revision 137553
n10    <h3 name="Summary">n
11      Summary
12    </h3>
n14      <code>-moz-box-sizing</code> is used by Mozilla browsers ton11      <code>-moz-box-sizing</code> is used by Mozilla browsers to
> alter the default CSS box model used to calculate widths and hei> alter the default CSS box model used to calculate widths and hei
>ghts of elements. It is possible to use this property to allow Mo>ghts of elements.
>zilla to emulate the behavior of browsers that do not correctly s 
>upport the CSS box model specification. Some other browsers suppo 
>rt <code>box-sizing</code> as specified in CSS3. 
n16    <ul>n
17      <li>{{ Xref_cssinitial() }}: {{ Cssxref("content-box") }}
18      </li>
19      <li>Applies to: all elements
20      </li>
21      <li>{{ Xref_cssinherited() }}: no
22      </li>
23      <li>Percentages: n/a
24      </li>
25      <li>Media: {{ Xref_cssvisual() }}
26      </li>
27      <li>{{ Xref_csscomputed() }}: as specified
28      </li>
29    </ul>
30    <h3 name="Syntax">
31      Syntax
32    </h3>
33    <pre class="eval">
34-moz-box-sizing: content-box | border-box | padding-box 
35</pre>
36    <h3 name="Values">
37      Values
38    </h3>
39    <dl>
40      <dt>
41        content-box
42      </dt>
43      <dd>
44        This is the default style as specified by the CSS standar
>d. The width and height properties are measured including only th 
>e content, but not the border, margin, or padding. 
45      </dd>
46      <dt>
47        padding-box
48      </dt>
49      <dd>
50        The width and height properties include the padding size,
> and do not include the border or margin. <code>padding-box</code 
>> isn't part of <a class="external" href="http://www.w3.org/TR/cs 
>s3-ui/#box-sizing" title="http://www.w3.org/TR/css3-ui/#box-sizin 
>g">CSS3-UI</a> and only supported by Firefox (Gecko). 
51      </dd>
52      <dt>
53        border-box
54      </dt>
55      <dd>
56        The width and height properties include the padding and b
>order, but not the margin. This is the box model used by Internet 
> Explorer when the document is not in Standards-compliant mode <a 
> class="external" href="http://msdn.microsoft.com/library/default 
>.asp?url=/library/en-us/dhtmltechcol/dndhtml/cssenhancements.asp" 
>></a>. 
57      </dd>
58    </dl>
59    <h3 name="Examples">
60      Examples
61    </h3>
62    <pre>
63/* support Firefox, Safari/WebKit, Opera and IE8 */
64 
65.example {  
66   -moz-box-sizing:    border-box; 
67   -webkit-box-sizing: border-box;
68    box-sizing:        border-box;
69}
70</pre>
71    <h3 name="Specifications">
72      Specifications
73    </h3>
74    <ul>
75      <li>
76        <a class="external" href="http://www.w3.org/TR/css3-ui/#b
>ox-sizing" title="http://www.w3.org/TR/css3-ui/#box-sizing">CSS3  
>Basic User Interface #box-sizing</a> 
77      </li>
78      <li>
79        <a class="external" href="http://www.w3.org/TR/css3-layou
>t/#box-sizing" title="http://www.w3.org/TR/css3-layout/#box-sizin 
>g">CSS3 Advanced Layout #box-sizing</a>&nbsp; (early working draf 
>t, expected to change) 
80      </li>
81    </ul>
82    <h3 name="Browser_compatibility">
83      Browser compatibility
84    </h3>
85    <table class="standard-table">
86      <tbody>
87        <tr>
88          <th>
89            Browser
90          </th>
91          <th>
92            Lowest Version
93          </th>
94        </tr>
95        <tr>
96          <td>
97            Internet Explorer
98          </td>
99          <td>
100            8.0&nbsp; <code>box-sizing</code>
101          </td>
102        </tr>
103        <tr>
104          <td>
105            Firefox
106          </td>
107          <td>
108            1.0 <code>-moz-box-sizing</code>
109          </td>
110        </tr>
111        <tr>
112          <td>
113            Opera
114          </td>
115          <td>
116            7.0&nbsp; <code>box-sizing</code>
117          </td>
118        </tr>
119        <tr>
120          <td>
121            Safari
122          </td>
123          <td>
124            3.0 <code>-webkit-box-sizing</code>
125          </td>
126        </tr>
127      </tbody>
128    </table>
129    <h3 name="See_also">
130      See also
131    </h3>
t133      <a class="internal" href="/en/CSS/box_model" title="En/CSS/t14      See {{ cssxref("box-sizing") }} for more information.
>Box model">CSS box model</a> 
15    </p>
16    <p>
17      &nbsp;

Back to History