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 上很好的主要内容,如果未能解决你的问题,请参考以下文章
css 中的li 里面默认的黑色点如何换成红色的,然后圆圈变大