求助前端，为啥这里有不明空隙

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 825 天前的主题，其中的信息可能已经有所发展或是发生改变。

这是我的一个业余小项目，是一个导航页，特色是可以自定义每个按钮的右键菜单。

t/825315 这是上次发帖，好久好久之前了。

最近这次（昨天）进行了更新，现在项目使用一个 json 当作数据库，可以很方便的制作不同的模板了，就不局限于视频网站了。

但是我目前遇到了一个怪问题，就是如图，有 img 的图标会有不明空隙，不知道怎么消除，请教一下 v2 网友！

项目地址： https://github.com/cornradio/watchTV/tree/main/a-plan

Imgur

第 1 条附言 2023-07-17 14:35:56 +08:00

这个帖子的两个问题都解决了

1. 是空白字符问题：
TomVista ：
parent.font-size=0

YuxiangLuo：
https://juejin.cn/post/7078969860545314824

2. 是加载不标准 json 的问题
Rache1 ：
fetch("icon_data.json")
.then(async function (response) {
return eval(`(${await response.text()})`);
})

另外这是当时提出的建议，现在这个网页终于可以加载自定义的模板了！

空隙

不明

img

JSON

28 条回复 2023-07-17 16:54:32 +08:00

MinYa

2023-07-17 09:58:56 +08:00

img 行内元素？试试设置为块级元素？ display: block;

TomVista

2023-07-17 10:02:47 +08:00

parent.font-size=0

kasusa

2023-07-17 10:08:26 +08:00

@MinYa img 使用 css 加的背景图片

kasusa

2023-07-17 10:10:07 +08:00

@TomVista 有效！啥原理……

kasusa

2023-07-17 10:13:29 +08:00

还有一个问题，是关于 js 的，我发现 json 当作数据库的话，有一点语法错误都不行，如何让他能忽略这多一个逗号的语法错误呢?

![Imgur](

)

这里是 json 载入的代码

```
fetch("icon_data.json")
.then(function(response) {
return response.json();
})
```

TomVista

2023-07-17 10:14:45 +08:00

那是个换行符,html 特色...

marcong95

2023-07-17 10:15:35 +08:00

@kasusa 两个行内<img>之间有空白字符（正则的\s+）会被替换为一个空格，所以就有这么一个谜之空白

你这个布局感觉可以上 flex 或者 grid 布局，那就不用处理这种不太符合直觉的空格了。font-size: 0 会被子元素继承，要是你想加上文字又会难受了。

1KN6sAqR0a57no6s

2023-07-17 10:16:39 +08:00

https://juejin.cn/post/7078969860545314824

Rache1

2023-07-17 10:23:05 +08:00

因为你这已经不是标准的 JSON 了，最简单的办法，就是用 eval 吧这个不标准的 JSON （但符合 Javascript 预发布）转成 Javascript 对象。

fetch("icon_data.json")
.then(async function (response) {
return eval(`(${await response.text()})`);
})
.then(data => {
console.log(data)
})
---

或者使用 JSON5

sgiyy

2023-07-17 10:30:40 +08:00

@kasusa #5 格式化 json ，一般好像可以解决这种简单的问题。鼠标右键，选择「格式化文档」

NoManPlay

2023-07-17 10:34:50 +08:00

@kasusa #5
如果是手动写入可以通过格式化工具解决
我用的 vscode+prettier
1.在 settings.json 中为 json 文件指定用 prettier 进行格式化
```
{
...,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
```

2. prettier 设置 trailingComma: 'none',

这样配合 FormatOnPaste/FormatOnSave/手动格式化都可以

kasusa

2023-07-17 10:42:53 +08:00

@marcong95 好的有空学学看 flex 或者 grid 布局这两个我都没用过。
目前用的 float ，调整这个图标大小调整的很头大…… 因为总是对不齐

kasusa

2023-07-17 10:45:50 +08:00

@Rache1 有用赞。