输入在 FireFox 和 Chrome 中具有不同的宽度

Question

我试图弄清楚为什么 FireFox 和 Chrome 的宽度相差如此之大。在我看来，这导致我的模态出现问题。

铬：

火狐：

因此，您可以从照片中看到，chrome 上的输入宽度是我想要的。但是，在 Firefox 上，宽度比 Chrome 中的大 60 像素。我四处阅读，我认为我的问题是 box-sizing 所以我将我的 input element 设置为 box-sizing: border-box;但我不认为 box-sizing 会导致问题，因为它什么也没改变。下面是我的 HTML 和 CSS。

HTML：

<div class="editModal">
<header>Edit</header>
<hr>
<form class="editForm">
  <ul>
    <li>
      <div>Title</div>
      <div class="editFormText">
        <input type="text" placeholder="Title" size="20">
      </div>
    </li>
    <br>

    <li>
      <div>URL</div>
      <div class="editFormText">
        <input type="text" placeholder="URL" size="20">
      </div>
    </li>
    <br>

    <li>
      <div>Description</div>
      <div class="editFormText">
        <input type="text" placeholder="Describe your Bookmarx!" size="20">
      </div>
    </li>
    <br>

    <li>
      <div>Keywords</div>
      <div class="editFormText">
        <input type="text" placeholder="Ex: face, book, fb, ..." size="20">
      </div>
    </li>
  </ul>
  <hr>
  <!--  -->
  <footer>
    <button>Cancel</button>
    <input type="submit" value="Save">
  </footer>
</form>

CSS：

.editModal {
  width: 320px; /* 300 + 10 + 10 + 1 + 1*/
  position: absolute;
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
  z-index: 2;  /* Lays it on top of <header> */
}

.editModal header {
  margin-top: 10px;
  margin-left: 5px;
}

.editForm {
  margin-bottom: 8px;
}

.editForm ul li {
  position: relative;
}

.editFormText {
  position: absolute;
  right: 5px;
  top: -2px;
  display: inline;
}

.editFormText input {
  box-sizing: border-box;
}

Answer 1

inputs 的size 属性指定字符的宽度（个数）。 Firefox 的字体比较大。

使用 css 为您的 inputs 设置宽度。

Answer 2

我习惯于 max-width:Xrem(forexample:3rem); 但我不使用百分比。