li 元素的（样式为 CSS）标记在 chromium 浏览器上位置错误，但在 firefox 上很好

Question

代码：（Stack Overflow 上的代码片段显示良好）

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.content-body {
  text-align: center;
  display: block;
}

.content-body-wrapper {
  text-align: center;
  display: inline-block;
  border-style: solid;
  border-color: #2B3AA7;
  border-width: 3px;
  border-radius: 30px;
  margin: 10px 10px 10px 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 15px;
}

.content-body p {
  max-width: 135ch;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.content-body li {
  margin-top: 5px;
  margin-bottom: 5px;
}

<!DOCTYPE html>
<html lang="sk">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="content-body">
    <div class="content-body-wrapper">
      <ul>
        <li>Podporu viacerých operačný systémov (Windows, MacOS, Linux)</li>
        <li>Automatickú, manuálnu aktualizáciu z prostredia aplikácie</li>
        <li>Šifrovanie databázy (AES-128bit)</li>
        <li>Exportovanie do formátov PDF, BIN</li>
        <li>Importovanie/Exportovanie jednotlivých záznamov medzi touto aplikáciou
        </li>
        <li>Podporu viacerých jazykov</li>
        <li>Prispôsobivosť používateľského rozhrania</li>
        <li>Importovanie záznamov z aplikácie Matrika pre jednoduchšiu migráciu
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Chromium 浏览器（Chrome、Opera）截图：

Firefox 和 Stack Overflow 屏幕截图（供将来 SO 渲染器更改时使用）：

我想在 Firefox 和 SO 中为所有浏览器实现外观。我想这是铬标记正在创建的一些隐含属性。

Answer 1

在 ul 上试试这个：

list-style: inside;

li 元素的（样式为 CSS）标记在 chromium 浏览器上位置错误，但在 firefox 上很好

li element's (styled with CSS) marker has wrong position on chromium browsers, but good on firefox

html

css

firefox

html-lists

chromium