Google Chrome开发者扩展弹出窗口的样式问题
问题：
我一直在尝试为正在开发的Google Chrome扩展创建自己的弹出界面。我才刚开始就遇到了弹出界面样式方面的问题。弹出页面周围会出现一个轻微的轮廓线，位置也略有偏移。这破坏了弹出界面的美观，尤其是因为它并非我添加的。
尝试的解决方案：
我尝试了多种修复方法，例如调整body标签和HTML标签的宽高。我还尝试了其他修复方法，例如为多个标签设置轮廓。但都不起作用。我发现自己在CSS或 HTML上所做的都无济于事。
观察：
我发现轮廓的底部部分比其他边都要大，当我稍微修改CSS或 HTML时，底部轮廓的大小也会变化。此外，当我点击扩展并播放淡入动画时，似乎没有视觉故障。淡入动画结束后，故障就出现了。一旦我离开扩展，出现淡出动画，视觉故障就会消失。
此外，我发现在我下载的所有扩展的弹出界面上都存在这个视觉故障。在附图中，你可以看到该问题也出现在AdGuard上。
JSON
{
"manifest_version": 3,
"name": "Example",
"version": "1.0",
"description" : "Example",
"action": {
"default_popup": "index.html"
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="styles.css">
<!--<script src="script.js" defer></script>-->
</head>
<body>
<h1 id="title">Example</h1>
</body>
</html>
CSS
body {
width: 300px;
height: 400px;
background-color: white;
}
#title {
text-align: center;
color: black;
}
解决方案
这似乎是一个UI缩放问题，在Windows上，当显示缩放比例不是100% 时就会发生。
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。