Chromeで表示されるFirefoxの入力フィールドの間にスペースを確保するにはどうすればよいですか？

Question

私は大きなDIVで3つの入力フィールドを持つようにしたいので、私は

<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:23%" /> 
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:23%"> 
    <input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width:40%"> 

を持っていると私は入力

.searchField { 
    display: table-cell; 
    line-height: 40px; 
    font-size: 22px; 
    margin: 0; 
    vertical-align: middle; 
    padding: 5px; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
    -webkit-appearance: textfield; 
    background-color: white; 
    -webkit-rtl-ordering: logical; 
    -webkit-user-select: text; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    text-align: start; 
} 

ためのこれらのスタイルは、しかし、私はChromeで気付いてきた私は、それぞれの間にスペースを取得します私が好きな入力フィールドですが、Firefoxはそのようなスペースを持っていません - https://jsfiddle.net/4sjxum1k/12/。 Chromeに悪影響を与えずに、Firefoxの入力と入力の間にスペースを表示するにはどうすればよいですか？

Answer 1

私はあなたがdisplay:inline-block;にdisplay:text-cell;を変更することをお勧め。 デフォルトのワードスペースが検索フィールドに適用されます。

次に、これらのフィールドをdivにラップし、このdivをスタイリングするなど、スペースのサイズを変更することもできます。 word-spacing:10px;

Answer 2

私は単に休憩を追加することをお勧めします。

<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:23%" /><br> 
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:23%"><br> 
<input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width:40%">