图片加载失败时，浏览器是否需遵循宽高规则及保留替换元素特性？

Great question — this is one of those areas where spec details are scattered across multiple documents, and browser historical behavior can muddy the waters a bit. Let's break it down clearly:

核心行为的标准定义 #

First off, while the img error section you linked doesn't cover every detail, the combined specs do have clear rules for the two areas you're asking about:

1. 替换元素身份是否保留 #

A failed-to-load <img> remains a replaced element. Per CSS specs, replaced elements are defined as elements whose content is determined by an external resource — even when that resource fails to load, the <img>'s fundamental type doesn't change. It's still designed to host an external image; it just falls back to rendering alternate content (like alt text or a broken-image placeholder) instead of the intended resource.

2. Width/Height (HTML Attributes vs CSS) #

The rules here split into two categories:

• HTML width/height attributes: These define the image's intrinsic dimensions. Even if the image fails to load, browsers should respect these intrinsic dimensions unless overridden by CSS. For example, <img width="200" height="150" src="broken.jpg"> should maintain a 200x150 placeholder in most modern browsers, though older browsers might shrink to fit the alt text size.
• CSS width/height styles: CSS takes precedence over HTML attributes. If you declare CSS dimensions (e.g., img { width: 300px; height: auto; }), the browser will follow those rules regardless of whether the image loads. The element will keep the 300px width, with height adjusting automatically to fit the alt text (if present).

If no dimensions are set at all (neither HTML attributes nor CSS), the failed image will size to fit its alt text — this is where browser differences can show up due to default font styles and layout engine quirks.

Where to Find the Missing Spec Details #

You're right that the HTML img error section is sparse. The additional rules are spread across complementary specs:

• CSS Images Module Level 3: Defines how replaced elements behave when their resource is unavailable, including layout rules for intrinsic dimensions and box model behavior.
• CSS Visual Formatting Model Level 2: Covers layout rules for inline replaced elements. Even without content, inline replaced elements follow their own layout rules and don't degrade to regular inline text elements.
• HTML Standard's "dimension attributes" section: Explicitly states that width/height attributes act as intrinsic dimension sources even when the image resource fails, and browsers should use these values for layout calculations.

Common Browser Differences #

While modern browsers align closely with specs, there are some historical quirks to note:

• Older Firefox versions might display a small broken-image icon when no alt text is present, using the icon's dimensions if no explicit sizes are set.
• Legacy IE versions sometimes ignored HTML width/height attributes for failed images, sizing the element to fit the alt text instead.
• Current versions of Chrome, Edge, and Safari strictly follow the spec: retaining replaced element status and honoring all set dimensions.

Quick Summary #

To recap the key points:

• A failed <img> is still a replaced element and follows replaced element layout rules.
• Any set HTML width/height attributes or CSS dimensions will be respected (CSS takes priority).
• The complete rules are spread across HTML and multiple CSS specs, not just the img error section you initially checked.

内容的提问来源于stack exchange，提问作者Jacob C.