li 元素的(使用 CSS 样式)标记在 chromium 浏览器上的位置错误,但在 Firefox 上很好

Posted

技术标签:

【中文标题】li 元素的(使用 CSS 样式)标记在 chromium 浏览器上的位置错误,但在 Firefox 上很好【英文标题】:li element's (styled with CSS) marker has wrong position on chromium browsers, but good on firefox 【发布时间】:2022-01-20 05:31:07 【问题描述】:

代码:(Stack Overflow 上的 sn-p 显示良好)

@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 中的外观。我猜这是标记铬正在创建的一些隐含属性。

【问题讨论】:

【参考方案1】:

ul 上试试这个:

list-style: inside;

【讨论】:

以上是关于li 元素的(使用 CSS 样式)标记在 chromium 浏览器上的位置错误,但在 Firefox 上很好的主要内容,如果未能解决你的问题,请参考以下文章

悬停时li元素上的嵌套css样式[重复]

css 中的li 里面默认的黑色点如何换成红色的,然后圆圈变大

css如何匹配第几个li元素并设置样式

使用 Tailwind CSS 为 <ul> 中的所有 <li> 项目设置样式

仅更改某些 li 元素的列表样式[关闭]

根据兄弟元素的数量来设置样式(CSS揭秘学习笔记)