An inconsistency problem between browsers, puzzle me long time

Answer 1

Try setting margin: 0 for all elements and see if you still have the same problem. Often browsers will apply their own margin/padding to different elements.

Answer 2

You have several possibilites:

• Javscript: You could set different values with Javscript depending on the browser like this: http://rafael.adm.br/css_browser_selector/
• Conditional HTML: Use the special <!--[if IE]> tags to solve the problem at least for Internet Explorer.
• Server side stylesheet switching: Detect the users browser with your server side language and include stylesheets accordingly.

Answer 3

I just find a solution myself, quite simple, just make the button float left, now appearance are kept same in all browsers.

Answer 4

Since you have not specified the rest of your CSS I could only test it with default settings in Chrome, Internet Explorer 8, and Mozilla Firefox, but this should look exactly the same across browsers making use of 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;
}

Apply your preferred styling and be sure to change top and left positions accordingly.