ввода CSS обивка не то же самое, как поверочного обивка

Question

У меня этот код:

echo "<table class='tpT'>"; 

foreach ($blueprints as $key => $blueprint) { 
    echo "<tr><td><span class='neutral'>Slot</span></td><td><input type='text' class='tpI' size='1'><span class='slotTypeOne'>{$blueprint['slot']}</span></td></tr>"; 
} 

echo "</table>"; 

в blueprints -array два элемента. Просто два имени, которые я хочу отобразить

Но две строки не похожи друг на друга. Они немного отличаются.

Вы видите, в первом ряду, input -field немного выше, чем красный span -элемента. Но во втором ряду они идеально подходят друг к другу. Я не знаю почему. Я имею в виду, что две строки должны выглядеть одинаково. Думаю, что так, по крайней мере.

Вот мой CSS:

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      font-size: 100%; 
      font-family: Arial; 
} 

body { 
    background: rgba(41, 128, 185,1.0); 
    background-attachment: fixed; 
} 




input.tpI { 

    background: rgba(236, 240, 241,.8); 
    border: none; 
    color: #333; 
    width: auto; 
    max-width: 100%; 
    padding: 5px; 

} 

table.tpT { 
    width: 100%; 
    background: rgba(50, 50, 50, .6); 
    border-top: 2px solid rgba(50, 50, 50, .2); 
    border-bottom: 2px solid rgba(50, 50, 50, .2); 
    color: #ddd; 
    padding: 5px; 
} 


.tpT td { 
    padding: 4px; 

} 


span.slotTypeOne { 
    background: #d35400; 
    color: #fff; 
    padding: 5px 7px 5.1px 7px; 
} 

span.neutral { 
    color: #333; 
    background: rgba(250, 250, 250, 1); 
    padding: 5px; 
    width: auto; 
    border: none; 
} 

Я выглядит по-разному в каждом браузере. Но ни один из них не выглядит превосходным. Я понятия не имею, почему. Потому что padding 5px. Для обоих.

Любые идеи?

Edit:

jsfiddle: jsfiddle.net/4wA7r/1

Answer 1

Я не уверен, но я предполагаю, что это происходит от линии высоты. Ваш вход и ваш диапазон не имеют одинаковой высоты линии по умолчанию. Поэтому вы должны установить, что он будет таким же.

span.slotTypeOne { 

    background: #d35400; 
    color: #fff; 
    padding: 5px 7px 5px 7px; 
    line-height: 20px; 
    display: block; 
    float: left; 

} 
input.tpI { 

    background: rgba(236, 240, 241,.8); 
    border: none; 
    color: #333; 
    width: auto; 
    max-width: 100%; 
    padding: 5px; 
    line-height: 20px; 
    display: block; 
    float: left; 
} 

Как вы можете видеть, я должен был установить эти элементы для отображения, блок, так как они не могли оставаться встроенный элемент (или мы не смогли отрегулировать «внутреннюю высоту строки»).

Это работает здесь: http://jsfiddle.net/4wA7r/4/