HTML相关疑问-01

最新推荐文章于 2025-04-11 09:13:44 发布

huaqi_

最新推荐文章于 2025-04-11 09:13:44 发布

阅读量143

点赞数

分类专栏：编程学习疑问文章标签： html chrome edge

本文链接：https://blog.youkuaiyun.com/huaqi_/article/details/122410690

版权

编程学习疑问专栏收录该内容

2 篇文章

订阅专栏

博主在验证MDN上关于<img>标签设置宽高及alt属性时，发现在不同系统和浏览器下表现不一致。Windows 10的Chrome和Edge浏览器未显示备选文本，Firefox则正常；而苹果系统（Intel和M1芯片）的Chrome和Safari中，备选文本显示有别。问题可能涉及浏览器兼容性、系统差异或代码执行。代码已附上，寻求解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔者在尝试做 MDN-HTML中的图片中关于 <img> 设置宽高部分实验时，发现实验结果与MDN文档给出的结果有些许出入。
MDN原文截图：
MDN原文截图-01
MDN原文截图-02
可以发现，在设置了图片的宽度和高度的前提下，图片未能正常显示时，会显示相应的备选文本（即 alt 属性值），以及图片的宽高值形成的一片预留空间。
然而当笔者使用win10系统（AMD）的chrome、edge、firefox浏览器进行上述实验时，结果截图如下：
win10-chrome浏览器：

win10-edge浏览器：

win10-firefox浏览器：
win10-firefox-01
win10-firefox-02
然而当我的朋友使用苹果系统（intel）的chrome、safari浏览器结果如下：
苹果-intel-chrome：

苹果系统-intel-safari浏览器：
神奇的事情发生了，图片空间是预留出来了，但是备选文本并未显示。
在这里插入图片描述
然后是苹果系统（M1）的safari浏览器：
完全符合MDN文档结果。
苹果-M1-safari
看到这里你可能会比较疑问了，是MDN文档问题呢，还是浏览器问题呢，还是芯片问题呢，亦或者代码问题呢，如果知道问题所在的大佬请踢我一下，万分感谢。
笔者已经
问上问上问
实验代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img
      src="images/dinosaur.jpg"
      alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
      width="400"
      height="341"
    />
  </body>
</html>