使用绝对定位的HTML 标签渲染不正确。

Question

使用绝对定位的HTML 标签渲染不正确。

3

我想在缩进的文本块左侧定期放置行号。我的想法是每行都有一个带有左侧填充的（请参见“诗歌”类），然后绝对定位一个^{元素以显示行号。但是，在Firefox中，我遇到了一个奇怪的渲染错误。似乎绝对定位的^{元素放置在不正确的高度，但如果我进入开发人员面板并更改某些内容，则^{元素突然被正确放置。下面的gif表示了这一点。第一行标有1，用于参考常规非缩进文本块。第二行以最初位置不正确的2开始。没有绝对定位的第二个2用于参考，以显示我期望的y偏移量。进入开发人员面板并更改left属性会突然更新绝对定位的2。但即使更新位置看起来仍不太正确；它看起来比第二个2高一点。

这是我的示例HTML文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
max-width: 900px;
/* margin: 0 auto !important; */
/* float: none !important; */
line-height: 1.5em;
}

.poetry {
position: relative;
padding-left: 2em;
}

.poetry .linenum {
display: inline;
position: absolute;
left: 0;
}
</style>
</head>
<body>

1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

2 2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</body>

有什么想法，为什么会发生这种情况，我该如何修复它？}}}

- thndrwrks

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GonePhishing · Answer 1

不要将sup嵌套在poetry的span中。

        body {
            max-width: 900px;
            /* margin: 0 auto !important; */
            /* float: none !important; */
            line-height: 1.5em;
        }

        .poetry {
            position: relative;
            padding-left: 2em;
        }

<body>
    <span>
        <sup class="linenum">1</sup> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
    <br> 
    <sup class="linenum">2</sup>
    <span class="poetry">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
</body>

- theshininglemonade · Answer 2

你可以使用 margin-right 属性来控制上标的位置：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            max-width: 900px;
            /* margin: 0 auto !important; */
            /* float: none !important; */
            line-height: 1.5em;
        }
        .poetry .linenum {
            display: inline;
            margin-right: 2em;
        }
    </style>
</head>
<body>
    <span>
        <sup class="linenum">1</sup> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
    <br>
    <span class="poetry">
        <sup class="linenum">2</sup>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
</body>

- Nour Ashraf · Answer 3

为什么不使用有序列表，并根据自己的喜好进行修改呢？

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <style>
          body {
            max-width: 900px;
            /* margin: 0 auto !important; */
            /* float: none !important; */
            line-height: 1.5em;
          }
      
          ol li {
            margin: 0 0 30px 0;
          }
          ol li span {
            margin-top: 5px;
            position: absolute;
            padding-left: 1rem;
          }
          ol {
            counter-reset: item;
            list-style-type: none;
          }
          ol li {
            display: block;
          }
          ol li:before {
            content: counter(item) "  ";
            counter-increment: item;
          }
        </style>
      </head>
      <body>
        <ol>
          <li>
            <span>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </span>
          </li>
          <li>
            <span>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </span>
          </li>
        </ol>
      </body>
    </html>

使用绝对定位的HTML <sup>标签渲染不正确。