Проблема несоответствия между браузерами, озадачивайте меня долгое время

Question

Сначала скриншоты

As you see, although i explicitly described the height, padding-top, etc, there's always a little differece between browsers, how can i make them the same? This problem keep puzzling me and i never find the cause, i even tried delete reset.css i use but still no luck

Paste related DOM and CSS for reference

DOM:

        ...
        
             
            
        

CSS:

#topsearch {
    height:31px;width:205px;
    padding:8px 0 4px;
    background-color:#202020;
    float:right;
}

#topsearch #s {
    height: 17px;
    padding: 5px;
    vertical-align: middle;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
}

Добавить представление в Firebug

Answer 1

Поскольку вы не указали остальную часть вашего CSS, я мог протестировать его только с настройками по умолчанию в Chrome, Internet Explorer 8 и Mozilla Firefox, но это должно выглядеть одинаково во всех браузерах, использующих position: absolute:

#topsearch {
    height: 43px;
    width: 205px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-color:#202020;
    position: relative;
    float: right;
}

#topsearch #s {
    height: 17px;
    width: 155px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    position: absolute;
    top: 12px;
    left: 30px;
    border: 0;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
    position: absolute;
    top: 10px;
}

Примените предпочитаемый стиль и обязательно измените положения top и left соответственно.

Answer 2

У вас есть несколько возможностей:

• JavaScript: Вы можете установить различные значения с помощью JavaScript в зависимости от браузера, как это: http://rafael.adm.br/css_browser_selector/
• Условный HTML: используйте специальные теги <!--[if IE]> для решения проблемы хотя бы для Internet Explorer.
• Переключение таблиц стилей на стороне сервера: определите браузер пользователей на языке вашего сервера и, соответственно, включите таблицы стилей.

Answer 3

Я просто нахожу решение, довольно простое, просто сделайте кнопку плавающей влево, теперь внешний вид сохраняется во всех браузерах.

Answer 4

Попробуйте установить margin: 0 для всех элементов и посмотрите, не возникла ли у вас такая же проблема. Часто браузеры применяют свои собственные поля / отступы к различным элементам.