缩小的 Chrome 扩展程序弹出窗口答案

【问题标题】：Shrunk Chrome extension popup缩小的 Chrome 扩展程序弹出窗口
【发布时间】：2023-01-02 05:54:09
【问题描述】：

我为 Chrome 扩展程序创建了一个 popup。这是弹出源代码：

<form>
  <label for="email">Email</label>
  <input type="email" id="email">
  <input type="submit">
  <p>Hello, world! This is a paragraph. And this is some text.</p>
</form>

这是它的样子：

它应该是这样的：

如您所见，元素未位于正确的位置。

为什么会这样？
如何预防？

【问题讨论】：

这是所有扩展页面中的一个古老错误，至今仍未修复：默认字体大小为 75%。解决方法是添加您自己的，例如body{font-size:15px}
@wOxxOm：这不是主要问题：只需查看元素及其位置即可。
尺寸确实是一个单独的问题。弹出窗口根据内容自动调整大小，因此其固有宽度为 0，这会导致您的内容溢出并换行。您可以为身体添加最小宽度。
将 <body> 更改为 <body style="min-width:350px">。

标签： html google-chrome-extension popup

【解决方案1】：

这是因为弹出窗口的主体不够宽，无法容纳它。要改变这一点，您可以添加超级简单的 CSS 来扩展弹出窗口的宽度。

body {
   width: 300px;
   height: 300px;
}

您可以将其更改为您想要的任何内容，只要它适合表单即可。

发生这种情况是因为扩展弹出窗口的默认宽度非常小，并且更喜欢保持较小。我们鼓励您更改它以适合您的内容。

【讨论】：