Question

我有一个输入（type =“ submit”）作为按钮，它的宽度/高度应与文本加空白一样高。这与我之前完成的按钮一起使用，但现在似乎不起作用。按钮文字显示为两行，但只能显示为一行。

.account-container.edit,
.information,
input.account-save {
  width: fit-content;
  font-size: 1em;
  padding: 2% 6%;
  color: white;
  background-color: #55ad47;
  border-radius: 1em;
  margin: 0 auto;
  resize: auto;
  line-height: normal;
  display: block;
}

.account-container.edit,
.information,
input,
textarea {
  letter-spacing: 0.01em;
  border: none;
}

* {
  box-sizing: border-box;
  font-family: Myriad Pro, sans-serif;
  font-style: normal;
  text-decoration: none;
  list-style: none;
  outline-width: 0;
}

<input type="submit" class="account-save" value="Save Profile">

奇怪的是，如果您检查元素并切换按钮的任何尺寸参数，它会“修复”自身并更改为以下尺寸：

它应该看起来像这样（在切换宽度等之后也是如此）

任何帮助将不胜感激！

Answer 1

尝试为旧版浏览器设置fit-content后备广告：

width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;

IE完全不支持该属性。 mdn-fit-content

根据mdn-resize，auto没有resize的值。您可能要在这里选择有效的内容。

除此之外，看起来还不错。您可能想告诉我们，您对哪些浏览器进行了测试，以便我（或其他人）可以对其进行正确的测试。

我已经对其进行了测试，使其外观漂亮：

Firefox 77.01
Safari 13.1.1

Answer 2

我确定我将填充设置为百分比，该百分比是按整个屏幕/父容器的百分比计算的，而不是输入的“适合内容”大小的百分比。因此，输入的文本大小正确，但是填充使文本在轴外偏移，并且未计算出按钮的完整大小以包含填充。

（填充的大小是在计算输入的大小之后计算出来的，“检查元素”中尺寸的切换是重新计算输入的大小，这次考虑了填充，这是先前假定的为0）

CSS提交按钮宽度不正确

2 个答案: