Ввод имеет разные ширины в FireFox и Chrome

Question

Я пытаюсь понять, почему ширина в FireFox и Chrome отличается на столько. Это вызывает проблемы с моим Modal в моих представлениях.

Chrome:

FireFox:

Так как вы можете видеть из фотографий ширину входа на хром является то, что я хочу быть. Однако в Firefox ширина на 60 пикселей больше, чем у Chrome. Я читал, и я думал, что мой вопрос был с размер окна, поэтому я установил свой элемент ввода , чтобы иметь размер окна: 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

Атрибут input с size определяет ширину (количество) символов. Шрифт больше в firefox.

Дайте input с шириной, используя css.