提问人：doggo 提问时间：3/3/2020 最后编辑：doggo 更新时间：3/4/2020 访问量：279
预先格式化的文本在 iPhone 上无法正确显示
pre-formatted text not showing up properly on iPhone
问：
我在获取预先格式化的文本以在我的 iPhone 上正确呈现时遇到了问题。
如果我只做一个预先格式化的项目，事情看起来没问题（代码紧挨着下面）。
<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>
<style>
pre {
background-color: rgb(30, 30, 30);
color: rgb(200,200,200);
}
</style>
<body>
<!-- exactly 80 characters -->
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</body>
</html>
但是当我尝试在有序列表（下面的代码）中做同样的事情时。
<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>
<style>
pre {
background-color: rgb(30, 30, 30);
color: rgb(200,200,200);
}
</style>
<body>
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
<ol>
<li> <div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</ol>
</div>
</body>
</html>
从我的电脑加载它时，一切看起来都很好，但是在我的 iPhone 上，不仅缩进的那个搞砸了，现在原来的看起来也错了。这几乎就像我添加列表时字体大小发生了变化一样。
两个版本的链接：
如何使此功能在手机上正常工作？我需要宽度为 80 个字符宽，以便可以显示标准终端输出。
答：
0赞
Sydney Y
3/4/2020
#1
css 单位实际上是 a（零）的宽度。因此，为了使您的代码正常工作，您必须确保父元素使用等宽字体，并且它是 Web 安全的，以便您的手机使用该等宽字体。ch0
在您的例子中，和正在使用单位，因此 和 需要具有等宽字体，因为它们不会从子标记继承。您还需要在元素及其父元素之间设置匹配的字体大小。divlichdivliprepre
评论
1赞
doggo
3/6/2020
经过几个小时的头撞在墙上，感觉自己是世界上最愚蠢的人，似乎大卫·金田（David Kaneda）对这个问题的回答是：stackoverflow.com/questions/3226001/......适用于我的情况（结合他的建议立即解决了问题）。
0赞
Sydney Y
3/6/2020
啊，太棒了！
评论