Eingang hat verschiedene Breiten in FireFox und Chrome

Question

Ich versuche herauszufinden, warum die Breiten in FireFox und Chrome um so viel unterscheiden. Es verursacht ein Problem mit meinem Modal in meinen Ansichten.

Chrome:

FireFox:

So wie man es von den Fotos, die Breite des Eingangs auf Chrom sehen ist, was ich will sein. In Firefox ist die Breite jedoch 60 Pixel größer als in Chrome. Ich lese herum und ich dachte, mein Problem wäre mit Box-Sizing, also setze ich meine Eingabeelement zu haben Box-Sizing: border-box; aber ich denke nicht, dass Box-Sizing verursacht ein Problem, weil es nichts geändert hat. Unten finden Sie meine HTML und 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

Die size Attribut input s die Breite in (Anzahl der Zeichen) angibt. Die Schriftart ist größer in Firefox.

Geben Sie input s eine Breite mit CSS.