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

Question

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

Chrome:

FireFox:

因此，正如您从照片中看到的那样，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 为您的 input 设置宽度。

Answer 2

我用的是max-width:Rem(例如:3rem); 但我不使用百分比。

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

Input has different Widths in FireFox and Chrome

html

css

pixel

width