Outline в <input> теги и проблемы с размером в Chrome

Question

я понял стилизованную форму поиска: HTML

@font-face { 
 
\t font-family:Beagle Normal; 
 
\t src:url(../data/beagle.woff); 
 
} 
 

 
#search input { 
 
\t border:1px solid #900; 
 
\t border-top-left-radius:14px; 
 
\t border-bottom-left-radius:14px; 
 
\t padding-left:14px; 
 
\t height:24px; 
 
\t display:inline; 
 
\t outline:0; 
 
} 
 

 
#search input:focus { 
 
\t outline:0; 
 
\t box-shadow: none !important; 
 
} 
 

 
#search button { 
 
\t background-color:#900; 
 
\t height:26px; 
 
\t display:inline; 
 
\t border:0; 
 
\t width:60px; 
 
\t position:relative; 
 
\t left:-8px; 
 
\t color:white; 
 
\t -webkit-appearance:none; 
 
}

<div id="search"> 
 

 
    <form> 
 
    \t <input type="search" placeholder="Search in the site" /> 
 
     <button type="submit">Search</button> 
 
    </form> 
 
</div>

Я удалил контур, который появляется в Chrome при фокусировке, но все же высоту предмета уменьшается, так же, как этот контур все еще существует.

Как я могу заставить его отображаться во всех браузерах так же, как с Firefox?

Firefox: http://i.stack.imgur.com/4vZFE.png IE11: равно FF Chrome: http://i.stack.imgur.com/iZ9aK.png

Answer 1

Вы имеете высоту вашего входного набора для 24px, он должен быть установлен такой же, как ваша кнопка, 26px (или оба должны 24px). Вам также может понадобиться использовать box-sizing:border-box; в зависимости от вашего более широкого CSS.

@font-face { 
 
    font-family: Beagle Normal; 
 
    src: url(../data/beagle.woff); 
 
} 
 
#search input { 
 
    border: 1px solid #900; 
 
    border-top-left-radius: 14px; 
 
    border-bottom-left-radius: 14px; 
 
    padding-left: 14px; 
 
    box-sizing:border-box; /* (you may or may not need this) */ 
 
    height: 26px; /* this should be the same... */ 
 
    display: inline; 
 
    outline: 0; 
 
} 
 
#search input:focus { 
 
    outline: 0; 
 
    box-shadow: none !important; 
 
} 
 
#search button { 
 
    background-color: #900; 
 
    height: 26px; /* as this... */ 
 
    box-sizing:border-box; /* (you may or may not need this) */ 
 
    display: inline; 
 
    border: 0; 
 
    width: 60px; 
 
    position: relative; 
 
    left: -8px; 
 
    color: white; 
 
    -webkit-appearance: none; 
 
}

<div id="search"> 
 

 
    <form> 
 
    <input type="search" placeholder="Search in the site" /> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
</div>

Answer 2

Нет больше проблем: я решил, используя хром только правило:

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
    #search input { 
    height: 26px; 
    } 
} 

Это работает очень хорошо. @ SW4 Выполнение этой проблемы устраняет проблему с Chrome, но вместо этого она делает неправильную работу FF и IE. Спасибо за ваше предложение в любом случае.