输入在FireFox和Chrome

Question

我想弄清楚为什么FireFox和Chrome的宽度相差很大。它在我的观点中导致了我的模态问题。

铬：

火狐：

因此，从照片中可以看出，chrome上的输入宽度是我想要的。但是，在Firefox上，宽度比Chrome中的宽度大60个像素。我阅读并认为我的问题是大小调整，所以我将输入元素设置为框大小：border-box; 但我不认为大小调整会导致问题，因为它什么都没改变。下面是我的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

size的{​​{1}}属性指定宽度（字符数）。 firefox中的字体更大。

使用css为您的input宽度。

Answer 2

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