javascript - 列表样式在索引 4000 之后停止显示罗马数字

Question

我创建了一个从 0 到 10,000 的简单列表，其中每个 li 都有一个 upper-roman 样式类型、一个随机背景颜色以及一个子元素abbr 显示颜色的十六进制字符串。

运行程序时，列表样式在索引 4000 之后从 upper-roman 更改为 decimal。

谁能向我解释一下这里发生了什么？

注意:运行测试需要几秒钟。

$(document).ready(readyHandler);

function readyHandler()
{
	var $list = $("#MyList");
	
	for (let i = 0; i < 10000; i++)
	{
		$list.append("<li><abbr title=\"\">Auto Insert " + i + "</abbr></li>");
	}	
	
	colors = [];
	
	for (let i = 0; i < $list.children().length; i++)
	{
		colors.push(getRandomColor());
	}
	
	$list.children().each(listItemsHandler);
}

function listItemsHandler(index, item)
{
	var $target = $(item);
	var color = colors[index];
	
	$target.css("background-color", color);
	$target.find("abbr").attr("title", color);
}

function getRandomColor()
{
	var color = "#";
	
	for (var i = 0; i < 3; i++)
	{
		var part = Math.round(Math.random() * 255).toString(16);
		
		color += (part.length > 1) ? part : "0" + part;
	}
	
	return color;
}

#MyList
{
	list-style-type: upper-roman;
	margin-left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol id = "MyList"></ol>

Answer 1

在 4000 处，罗马数字开始包含上划线，该上划线没有用于以纯文本显示的 ASCII 表示形式。例如，4000 是 IV顶部有一条线。因此，浏览器渲染器无法表示 char 中的数字。形式为 <li>子弹。

表示这一点的唯一方法是使用附加 css 属性 overline .

简而言之，无法将超过 3999 的数字表示为元素符号元素。