为何切换DOCTYPE声明会导致图片的尺寸与位置发生变化？

当使用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">声明时，页面显示正常：图片固定在左右边距，文本居中。但切换为HTML5标准声明<!DOCTYPE HTML>后，图片出现位移且尺寸异常。现有代码如下，需要调整至与HTML4 Transitional声明下一致的显示效果：

<!DOCTYPE HTML>
<html lang=en>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <TITLE>favorite things</TITLE>
  <META name="KEYWORDS" CONTENT="filk">
  <style>
    .verse {
      text-align: center;
      font-size: 2em;
      width: 60%
    }
    
    img.l {
      float: left;
      width: 12%;
      position: fixed;
      left: -20%;
    }
    
    img.r {
      float: right;
      width: 12%;
      position: absolute;
      right: 20%;
    }
  </style>
</head>

<BODY LANG="en-US" DIR="LTR">
  <div style="position:absolute; left:20%; width:60%;">
    <H1 style="font-size:4em; text-align:center;">My favorite things</H1>

    <p>
      [Verse]
    </p>
    <img class=L src="https://upload.wikimedia.org/wikipedia/en/d/db/Silmarillion.png" alt="The Silmarillion">
    <img class=R src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif" alt="The Fellowship of the Ring">
    <p class="verse">
      <a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a>
      <br> And <a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">swords that are broken</a>
      <br> Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a>
      <br> That must not be spoken
      <br>
      <img class=L src="https://upload.wikimedia.org/wikipedia/en/1/11/The_Return_of_the_King_cover.gif" alt="The Return of the King">
      <a href="https://en.wikipedia.org/wiki/Denethor">Unfaithful stewards</a>
      <br> Who don't want their kings
      <br> These are a few of my favorite things.
    </p>
    <br>
    <p>
      [hook]
    </p>
    <p class="verse">
      <img class=L src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg" alt="The Currents of Space"> When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites, when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a>      stings
      <br> When I'm feeling bad
      <br> I simply remember my favorite <a href="https://en.wikipedia.org/wiki/Aragorn">kings</a>
      <br> And I don't feel so bad.
    </p>
    <p>
      [Verse]
      <img class=L src="http://www.philsp.com/visco/Magazines/ASF/ASF_0224.jpg" alt="Astounding Science Fiction vol. XLIII, no. 5, July 1949">
      <img class=R src="https://upload.wikimedia.org/wikipedia/en/3/38/Agent_of_vega.jpg" Alt="<i>Agent of Vega</i> front cover">
    </p>
    <p class="verse">
      Pedllers who drive their
      <br> Mysteriuos wagons
      <br> Pretty young ladies
      <br> Who can speak to dragons
      <br>
      <img class=L src="https://www.isfdb.org/wiki/images/4/45/ANLGOCT67.jpg" Alt="<i>Analog vol. 80,no 2, October 1967">
      <img class=R src="https://upload.wikimedia.org/wikipedia/en/7/75/AnneMcCaffrey_Dragonflight.jpg" Alt="<i>Dragonflight</i> front cover">
      <!--
                  http://www.philsp.com/visco/Magazines/ASF/ASF_0445.jpg
                  Analog vol. LXXX, no. 4, December 1967
                  Dragonrider part 1
             -->
      Travelling the Cosmos
      <br> In a
      <a href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">ship who sings</a>
      <br> These are a few of my favorite things.
    </p>
    <br>
    <img class=L src="https://upload.wikimedia.org/wikipedia/en/6/60/ShipWhoSang.jpg" alt="<i>The Ship Who Sang</i> front cover">
    <p>
      [Verse]
    </p>
    <p class="verse">
      <img class=L src="https://www.isfdb.org/wiki/images/b/b1/FSFMar1959.jpg" alt="The Magazine of Fantasy & Science Fiction, March 1959">
      <a href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
</a>
      <br> Who are like no others
      <br> Who are their own fathers
      <br> And are their own mothers
      <br>
      <img class=R src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Heinlein-face.jpg" alt="Robert Anson Heinlein, Grand Master of SF"> Of all such stories
      <br> Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
      <br> These are a few of my favorite things.
    </p>
    <br>
    <p>
      [Verse]
    </p>
    <p class="verse">
      <img class=L src="https://isfdb.org/wiki/images/1/10/LRDDRCRWLR2002.jpg" alt="Lord Darcy"> A <a href="https://en.wikipedia.org/wiki/Lord_Darcy_(character)">ducal detective</a> whose
      <br> Aide does the magic
      <br> finds that their cases
      <br> are often quite tragic
      <br> I hope more stories
      <br> still lurk in the wings
      <br> These are a few of my favorite things.
    </p>
  </div>
</BODY>

</HTML>

问题根源 #

HTML4 Transitional声明会触发浏览器的怪异模式（Quirks Mode），而HTML5的<!DOCTYPE HTML>会启用标准模式（Standards Mode）。两种模式下浏览器对CSS盒模型、定位规则的计算逻辑完全不同：

• 怪异模式下，position: fixed/absolute会忽略父容器的定位上下文，且float属性会被非标准处理；
• 标准模式下，浏览器严格遵循CSS规范，position: absolute会相对于最近的定位父元素（即代码中left:20%; width:60%的div）计算位置，同时position属性会直接覆盖float的效果，导致图片定位逻辑彻底混乱。

修复方案 #

调整CSS规则，移除冲突属性，明确图片定位逻辑，让页面在标准模式下复刻怪异模式的布局效果：

<!DOCTYPE HTML>
<html lang=en>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <TITLE>favorite things</TITLE>
  <META name="KEYWORDS" CONTENT="filk">
  <style>
    .verse {
      text-align: center;
      font-size: 2em;
      width: 60%;
      margin: 0 auto;
    }
    
    img.l {
      width: 12%;
      position: fixed;
      left: 4%;
      top: auto;
    }
    
    img.r {
      width: 12%;
      position: fixed;
      right: 4%;
      top: auto;
    }
    
    .content-container {
      width: 60%;
      margin: 0 auto;
    }
  </style>
</head>

<BODY LANG="en-US" DIR="LTR">
  <div class="content-container">
    <H1 style="font-size:4em; text-align:center;">My favorite things</H1>

    <p>
      [Verse]
    </p>
    <img class=l src="https://upload.wikimedia.org/wikipedia/en/d/db/Silmarillion.png" alt="The Silmarillion">
    <img class=r src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif" alt="The Fellowship of the Ring">
    <p class="verse">
      <a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a>
      <br> And <a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">swords that are broken</a>
      <br> Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a>
      <br> That must not be spoken
      <br>
      <img class=l src="https://upload.wikimedia.org/wikipedia/en/1/11/The_Return_of_the_King_cover.gif" alt="The Return of the King">
      <a href="https://en.wikipedia.org/wiki/Denethor">Unfaithful stewards</a>
      <br> Who don't want their kings
      <br> These are a few of my favorite things.
    </p>
    <br>
    <p>
      [hook]
    </p>
    <p class="verse">
      <img class=l src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg" alt="The Currents of Space"> When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites, when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a>      stings
      <br> When I'm feeling bad
      <br> I simply remember my favorite <a href="https://en.wikipedia.org/wiki/Aragorn">kings</a>
      <br> And I don't feel so bad.
    </p>
    <p>
      [Verse]
      <img class=l src="http://www.philsp.com/visco/Magazines/ASF/ASF_0224.jpg" alt="Astounding Science Fiction vol. XLIII, no. 5, July 1949">
      <img class=r src="https://upload.wikimedia.org/wikipedia/en/3/38/Agent_of_vega.jpg" Alt="<i>Agent of Vega</i> front cover">
    </p>
    <p class="verse">
      Pedllers who drive their
      <br> Mysteriuos wagons
      <br> Pretty young ladies
      <br> Who can speak to dragons
      <br>
      <img class=l src="https://www.isfdb.org/wiki/images/4/45/ANLGOCT67.jpg" Alt="<i>Analog vol. 80,no 2, October 1967">
      <img class=r src="https://upload.wikimedia.org/wikipedia/en/7/75/AnneMcCaffrey_Dragonflight.jpg" Alt="<i>Dragonflight</i> front cover">
      <!--
                  http://www.philsp.com/visco/Magazines/ASF/ASF_0445.jpg
                  Analog vol. LXXX, no. 4, December 1967
                  Dragonrider part 1
             -->
      Travelling the Cosmos
      <br> In a
      <a href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">ship who sings</a>
      <br> These are a few of my favorite things.
    </p>
    <br>
    <img class=l src="https://upload.wikimedia.org/wikipedia/en/6/60/ShipWhoSang.jpg" alt="<i>The Ship Who Sang</i> front cover">
    <p>
      [Verse]
    </p>
    <p class="verse">
      <img class=l src="https://www.isfdb.org/wiki/images/b/b1/FSFMar1959.jpg" alt="The Magazine of Fantasy & Science Fiction, March 1959">
      <a href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
</a>
      <br> Who are like no others
      <br> Who are their own fathers
      <br> And are their own mothers
      <br>
      <img class=r src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Heinlein-face.jpg" alt="Robert Anson Heinlein, Grand Master of SF"> Of all such stories
      <br> Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
      <br> These are a few of my favorite things.
    </p>
    <br>
    <p>
      [Verse]
    </p>
    <p class="verse">
      <img class=l src="https://isfdb.org/wiki/images/1/10/LRDDRCRWLR2002.jpg" alt="Lord Darcy"> A <a href="https://en.wikipedia.org/wiki/Lord_Darcy_(character)">ducal detective</a> whose
      <br> Aide does the magic
      <br> finds that their cases
      <br> are often quite tragic
      <br> I hope more stories
      <br> still lurk in the wings
      <br> These are a few of my favorite things.
    </p>
  </div>
</BODY>

</HTML>

核心调整说明 #

1. 移除了图片类中冲突的float属性——因为position: fixed会让元素脱离文档流，float在此场景下完全无效，还会干扰布局计算；
2. 将右侧图片的position: absolute改为fixed，和左侧图片保持一致的定位上下文（相对于视口），确保左右图片都固定在页面边距；
3. 调整left/right数值为4%，替换原来的-20%/20%，适配标准模式下的视口计算逻辑；
4. 用margin: 0 auto替代原来的position:absolute; left:20%实现内容居中，更符合标准模式的布局规范，同时避免文本被固定定位的图片遮挡。

内容的提问来源于stack exchange，提问作者shmuel