32、CSS 属性在主流浏览器中的支持情况

最新推荐文章于 2025-10-13 23:14:08 发布

c6d7e8f9g

最新推荐文章于 2025-10-13 23:14:08 发布

阅读量26

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS艺术：从理论到实践文章标签： CSS属性浏览器兼容性字体样式

本文链接：https://blog.youkuaiyun.com/c6d7e8f9g/article/details/153253882

CSS艺术：从理论到实践专栏收录该内容

38 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

CSS 属性在主流浏览器中的支持情况

1. 字体相关属性

1.1 FONT - STYLE

描述：设置显示的字体是否为斜体。
CSS 家族类型 ：Font
取值：
- ITALIC | NORMAL：确定文本是否为斜体。
- OBLIQUE：用于创建斜体文本（适用于不理解“italic”术语的字体）。
示例代码 ：

<I STYLE="FONT: OBLIQUE">This text is set to oblique. </I>

1.2 FONT - VARIANT

描述：确定文本如何使用大写字母显示。
CSS 家族类型 ：Font
取值：
- NORMAL | SMALL - CAPS：这些值用于切换小型大写字母效果的开和关。
示例代码 ：

<H1 STYLE="FONT - VARIANT: SMALL - CAPS">this text is displayed in small capital letters</H1>

1.3 FONT - WEIGHT

描述：设置显示字体的粗细。
CSS 家族类型 ：Font
取值：
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：绝对字体粗细值。
- BOLD | NORMAL：设置指定文本元素是否使用粗体。
- BOLDER | LIGHTER：相对于先前指定的值更改当前指定元素的粗细。
示例代码 ：

<I STYLE="FONT: BOLD">This italicized text is also set to bold using CSS.</I>

1.4 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
FONT - STYLE
FONT - VARIANT	Partial Partial	Partial Safe	Partial Safe	Partial Safe	Partial Safe	Safe Partial	Safe Partial	Safe Safe
FONT - WEIGHT	Unsafe Partial	Safe Partial	Safe Partial	Safe Partial	Safe Partial	Unsafe Partial	Unsafe Partial	Safe Partial

2. 盒子与文本间距相关属性

2.1 HEIGHT

描述：此属性将元素（通常是图像）缩放到指定的高度。
CSS 家族类型 ：Boxes (Sub - Family: Padding)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<IMG SRC="philco_jnr.jpg" STYLE="HEIGHT: 2.5in">

2.2 LETTER - SPACING

描述：指定字母之间的间距值。
CSS 家族类型 ：Text
取值：
- NORMAL：浏览器的默认字母间距值。
- length (units)：以测量单位设置字母之间的长度值。
示例代码 ：

<B STYLE="LETTER - SPACING: 1cm">Some wide letter spacing!</B>

2.3 LINE - HEIGHT

描述：设置网页上文本行之间的距离。
CSS 家族类型 ：Font
取值：
- NORMAL：将行高设置为浏览器使用的默认值。
- n：设置当前使用字体高度的倍数。
- %：设置相对于当前使用字体大小的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

Baseline<BR>
<H1 STYLE="LINE - HEIGHT: 2.5in">This appears 2 inches down from the break element at the top of the page!</H1>

2.4 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
HEIGHT
LETTER - SPACING	Unsafe	Safe	Safe	Safe	Safe	Unsafe	Unsafe	Safe
LINE - HEIGHT	Unsafe Partial	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Unsafe Partial	Unsafe Partial	Safe Partial

3. 列表样式相关属性

3.1 LIST - STYLE

描述：这是一个缩写元素，使网页作者能够按照 LIST - STYLE - POSITION、LIST - STYLE - IMAGE 和 LIST - STYLE - TYPE 的方式快速设置列表项标记。
CSS 家族类型 ：Classification
取值：
- CIRCLE | DISC | SQUARE：设置指定的符号出现在每个列表项之前。
- DECIMAL | LOWER - ALPHA | LOWER - ROMAN | UPPER - ALPHA | UPPER - ROMAN：设置出现在每个列表项之前的字母数字符号类型。
- NONE：列表项之前不显示列表标记。
- URL(image)：指定用作列表标记的图形的 URL。
- INSIDE：将列表项的文本显示在与列表标记相似的缩进级别。
- OUTSIDE：将列表项的文本显示为从列表标记缩进。
示例代码 ：

<UL STYLE="LIST - STYLE: SQUARE">
  <LI>List items
  <LI>preceded by
  <LI>solid squares
</UL>

3.2 LIST - STYLE - IMAGE

描述：指定用作列表元素之前标记的图像。
CSS 家族类型 ：Classification
取值：
- NONE：列表项之前不显示列表标记。
- URL(image)：指定用作列表标记的图形的 URL。
示例代码 ：

<UL>
  <LI STYLE="LIST - STYLE - IMAGE: url(trajan.jpg)">Emperor Trajan, 98 - 117 AD
  <LI STYLE="LIST - STYLE - IMAGE: url(hadrian.jpg)">Emperor Hadrian, 117 - 158 AD
</UL>

3.3 LIST - STYLE - POSITION

描述：指定列表标记相对于列表项内容本身的渲染方式。
CSS 家族类型 ：Classification
取值：
- INSIDE：将列表项的文本显示在与列表标记相似的缩进级别。
- OUTSIDE：将列表项的文本显示为从列表标记缩进。
示例代码 ：

<UL STYLE="LIST - STYLE - POSITION: INSIDE">
  <LI>Notice how the text in the second line of this bullet item is begins underneath the bullet rather than directly under the first word.
</UL>

3.4 LIST - STYLE - TYPE

描述：此元素设置出现在列表项之前的列表标记的类型。
CSS 家族类型 ：Classification
取值：
- CIRCLE | DISC | SQUARE：设置出现在列表元素之前的符号类型。
- DECIMAL | LOWER - ALPHA | LOWER - ROMAN | UPPER - ALPHA | UPPER - ROMAN：设置出现在列表标记之前的字母数字符号类型。
- NONE：列表项之前不显示列表标记。
示例代码 ：

<UL STYLE="LIST - STYLE - TYPE: LOWER - ALPHA">
  <LI>List items
  <LI>preceded by
  <LI>lower - case letters
</UL>

3.5 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
LIST - STYLE
LIST - STYLE - IMAGE	Unsafe	Safe	Safe	Safe	Safe	Unsafe	Unsafe	Safe
LIST - STYLE - POSITION	Unsafe	Safe	Safe	Safe	Safe	Unsafe	Unsafe	Safe
LIST - STYLE - TYPE	Unsafe Unsafe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Unsafe Safe	Unsafe Safe	Safe Safe

4. 边距与内边距相关属性

4.1 MARGIN

描述：这是一个缩写元素，使网页作者能够快速设置边距值，如 MARGIN - TOP、MARGIN - RIGHT、MARGIN - LEFT 或 MARGIN - BOTTOM。
CSS 家族类型 ：Boxes (Sub - Family: Margin)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- n [ n n n] measurement_units：如果有 1 个值，所有边框都设置为指定的数值；如果有 2 个值，顶部/底部和侧边边框采用指定的数值；如果有 3 个值，顶部、右侧和左侧，然后底部采用指定的数值；如果有 4 个值，顶部、右侧、底部然后左侧边框采用指定的数值。
示例代码 ：

<H1 STYLE="MARGIN: 2in">This text has a margin set to two inches.</H1>

4.2 MARGIN - BOTTOM

描述：指定元素与浏览器窗口底部边缘或其下方出现的下一个元素的距离。
CSS 家族类型 ：Boxes (Sub - Family: Margin)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<TT STYLE="MARGIN - BOTTOM: 1IN">This text is indented 1 inch from the element below it.</TT>

4.3 MARGIN - LEFT

描述：指定元素与浏览器窗口左边缘或其左侧紧邻的元素的距离。
CSS 家族类型 ：Boxes (Sub - Family: Margin)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<H1 STYLE="MARGIN - LEFT: 2.5IN">This header is indented 2 and a half inches from the left margin.</H1>

4.4 MARGIN - RIGHT

描述：指定元素与浏览器窗口右边缘或其右侧下一个元素的距离。
CSS 家族类型 ：Boxes (Sub - Family: Margin)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<IMG SRC="trajan.jpg" STYLE="MARGIN - RIGHT: 1IN">This text is set 1 inch from the adjacent image.

4.5 MARGIN - TOP

描述：指定元素与浏览器窗口顶部边缘或其上方元素的距离。
CSS 家族类型 ：Boxes (Sub - Family: Margin)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<H1 STYLE="MARGIN - TOP: 150PX">Header situated 150 pixels from the top margin.</H1>

4.6 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
MARGIN
MARGIN - BOTTOM	Partial	Partial	Partial	Partial	Partial	Partial	Partial	Partial
MARGIN - LEFT	Unsafe Partial	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Partial
MARGIN - RIGHT	Partial	Safe	Safe	Safe	Safe	Safe	Safe	Partial
MARGIN - TOP	Partial	Safe	Safe	Safe	Safe	Safe	Safe	Partial

5. 内边距相关属性

5.1 PADDING

描述：这是一个缩写元素，使网页作者能够快速设置内边距值，如 PADDING - TOP、PADDING - RIGHT、PADDING - LEFT 或 PADDING - BOTTOM。
CSS 家族类型 ：Boxes (Sub - Family: Padding)
取值：
- AUTO：指定应使用浏览器默认值。
- %：设置元素宽度的百分比值。
- n [ n n n] measurement_units：如果有 1 个值，所有边框都设置为指定的数值；如果有 2 个值，顶部/底部和侧边边框采用指定的数值；如果有 3 个值，顶部、右侧和左侧，然后底部采用指定的数值；如果有 4 个值，顶部、右侧、底部然后左侧边框采用指定的数值。
示例代码 ：

<IMG SRC="ne_bullet.jpg" STYLE="PADDING: 1CM">This text is offset 1 cm right and below the image, and the image is itself offset from the margins of the browser window by the same amount.

5.2 PADDING - BOTTOM

描述：设置元素底部的内边距量。
CSS 家族类型 ：Boxes (Sub - Family: Padding)
取值：
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<B STYLE="PADDING - BOTTOM: 2IN">This is padded from the bottom (i.e., from the element below it) by 2 inches.</B>
<P>
  Some extra text to demonstrate the effect.

5.3 PADDING - LEFT

描述：设置元素左侧的内边距量。
CSS 家族类型 ：Boxes (Sub - Family: Padding)
取值：
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<STRONG STYLE="PADDING - LEFT: 15PT">This is padded from the left by 15 points.</STRONG>

5.4 PADDING - RIGHT

描述：设置元素右侧的内边距量。
CSS 家族类型 ：Boxes (Sub - Family: Padding)
取值：
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<STRONG STYLE="PADDING - RIGHT: 200PX">This text has a padding of 200 pixels from the right. To demonstrate the effect properly, you need a another, long, rambling sentence that just goes on and on and on and on...</STRONG>

5.5 PADDING - TOP

描述：设置元素顶部的内边距量。
CSS 家族类型 ：Boxes (Sub - Family: Padding)
取值：
- %：设置元素宽度的百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：

<B STYLE="PADDING - TOP: 50MM">This text is padded from the top by 50 millimeters.</B>

5.6 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
PADDING	Unsafe Unsafe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Partial
PADDING - BOTTOM
PADDING - LEFT	Unsafe	Safe	Safe	Safe	Safe	Safe	Safe	Partial
PADDING - RIGHT
PADDING - TOP	Unsafe Unsafe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Partial

6. 文本排版相关属性

6.1 TEXT - ALIGN

描述：设置文本的对齐方式。
CSS 家族类型 ：Text
取值：
- CENTER | JUSTIFY | LEFT | RIGHT：对齐指定元素内包含的文本。
示例代码 ：

<P STYLE="TEXT - ALIGN: CENTER">Centered text</P>
<P STYLE="TEXT - ALIGN: JUSTIFY">Justified text</P>
<P STYLE="TEXT - ALIGN: LEFT">Left - aligned text</P>
<P STYLE="TEXT - ALIGN: RIGHT">Right - aligned text</P>

6.2 TEXT - DECORATION

描述：为指定的 HTML 标签添加“装饰”属性。
CSS 家族类型 ：Text
取值：
- BLINK：文本闪烁。
- LINE - THROUGH：文本中间有一条线（删除线文本）。
- NONE：不添加装饰。
- OVERLINE：文本上方显示一条线。
- UNDERLINE：文本下划线。
示例代码 ：

<A HREF="fred.html" STYLE="TEXT - DECORATION: NONE">This link is not underlined</A>
<H1 STYLE="TEXT - DECORATION: OVERLINE">Header with an Overline</H1>
<H1 STYLE="TEXT - DECORATION: UNDERLINE">Header with an Underline</H1>
<P STYLE="TEXT - DECORATION: LINE - THROUGH">Ignore this sentence</P>
<I STYLE="TEXT - DECORATION: BLINK">This text blinks</I>

6.3 TEXT - INDENT

描述：指定从左边缘或块元素的缩进。
CSS 家族类型 ：Text
取值：
- length (units)：以测量单位指定长度值。
- %：以浏览器窗口显示的百分比指定距离。
示例代码 ：

<H1 STYLE="TEXT - INDENT: 1in">This text is indented from the margins by 1 inch.</H1>

6.4 TEXT - TRANSFORM

描述：指定文本使用的大小写类型。
CSS 家族类型 ：Text
取值：
- CAPITALIZE：将单词的首字母设置为大写。
- LOWERCASE：将所有文本设置为小写。
- NONE：不进行转换。
- UPPERCASE：将所有文本设置为大写。
示例代码 ：

<H1 STYLE="TEXT - TRANSFORM: CAPITALIZE">Header in initial caps</H1>
<H2 STYLE="TEXT - TRANSFORM: LOWERCASE">HEADER ALL IN LOWERCASE LETTERS</H2>
<H3 STYLE="TEXT - TRANSFORM: UPPERCASE">header all in uppercase letters</H3>
<H4 STYLE="TEXT - TRANSFORM: NONE">Nothing special happens with this header</H4>

6.5 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
TEXT - ALIGN	Unsafe Partial	Safe Safe	Safe Partial	Partial Partial	Safe Safe	Safe Safe	Safe Safe	Partial Safe
TEXT - DECORATION
TEXT - INDENT	Partial	Partial	Partial	Partial	Partial	Partial	Partial	Partial
TEXT - TRANSFORM	Safe Unsafe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe	Safe Safe

7. 垂直对齐与空白处理属性

7.1 VERTICAL - ALIGN

描述：设置与其关联的 HTML 标签的垂直位置。
CSS 家族类型 ：Text
取值：
- BASELINE | BOTTOM | MIDDLE | SUB | SUPER | TEXT - TOP | TEXT - BOTTOM | TOP：相对于指定值对齐文本元素。
示例代码 ：

<B STYLE="VERTICAL - ALIGN: SUB">Subscript - aligned text</B> <I STYLE="FONT - SIZE: 16pt">Large, italicized text.</I>
<B STYLE="VERTICAL - ALIGN: SUPER">Superscript - aligned text</B> <I STYLE="FONT - SIZE: 16pt">Large, italicized text.</I>

7.2 WHITE - SPACE

描述：此元素用于设置网页内的空白和处理回车符的方式。
CSS 家族类型 ：Classification
取值：
- NORMAL：与此元素关联的 HTML 标签的浏览器默认行为。
- NOWRAP：设置此值时，回车符和换行符将呈现为单个空格，但不影响换行。
- PRE：设置此值时，文档中的所有空格、回车符和换行符将“原样”显示。
示例代码 ：

<P STYLE="WHITE - SPACE: NORMAL">
There
is no
extra white space
in
this sentence.
It is
displayed normally.
</P>
<P STYLE="WHITE - SPACE: PRE">
The
extra white
spaces and carriage
returns in
this sentence
are displayed.
</P>
<P STYLE="WHITE - SPACE: NOWRAP">
The
extra white
space and carriage
returns in
this sentence
are <B>not</B> displayed.
</P>

7.3 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
VERTICAL - ALIGN
WHITE - SPACE	Unsafe	Partial	Partial	Partial	Partial	Unsafe	Unsafe	Partial

8. 宽度属性

8.1 WIDTH

描述：将元素（最常见的是图像）缩放到指定的宽度。
CSS 家族类型 ：Boxes
取值：
- AUTO：指定应使用浏览器默认值。
- %：相对于浏览器窗口宽度设置百分比值。
- length (units)：以测量单位指定长度值。
示例代码 ：暂未提及，但使用方式类似其他长度相关属性，如 <IMG SRC="example.jpg" STYLE="WIDTH: 300px">

8.2 主流浏览器支持情况

属性	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
WIDTH	Unsafe	Unsafe	Unsafe	Unsafe	Unsafe	Partial	Partial	Unsafe

总结

在进行网页开发时，了解这些 CSS 属性在主流浏览器中的支持情况至关重要。不同的属性在不同浏览器版本中的表现可能会有所差异，开发者需要根据目标用户群体所使用的浏览器版本，合理选择和使用 CSS 属性，以确保网页在各种浏览器上都能呈现出一致且美观的效果。

下面是一个简单的 mermaid 流程图，展示了选择 CSS 属性时考虑浏览器支持情况的流程：

graph TD;
    A[确定所需 CSS 属性] --> B{检查主流浏览器支持情况};
    B -- 支持良好 --> C[使用该属性];
    B -- 支持不佳 --> D[寻找替代属性或解决方案];
    D --> C;

通过这个流程图，开发者可以在实际开发中更有条理地处理 CSS 属性的选择问题，提高开发效率和网页的兼容性。