How do I solve these rendering differences

Hi guys,

I have a search button attached to a search field which rendered as bellow:

How do I fix those differences.
HTML:

<form method=post action="search.php">
    <input type=text name=search />
    <input type=submit class=search_button value='search' />
</form>

Code (markup):

CSS:

input[type="text"][name="search"]{
    border:none;
    border-radius: 0.8em 0 0 0.8em;
    height: 1.5em;
    margin-right: -0.27em;
}
.search_button {
    padding: 0.28em 0.7em 0.28em 0.7em;
    background-color: #FFF;
    border-radius: 0 0.8em 0.8em 0;
    border: none;
    cursor: pointer;
    -moz-box-shadow: 0 0 0.2em #888;
    -webkit-box-shadow: 0 0 0.2em #888;
    box-shadow: 0 0 0.2em #888;
}

Code (markup):

I want it to look like rendered in Chrome.
Thanks,

Note that I've borrowed CSS reset from the tutorial of this thread: https://forums.digitalpoint.com/threads/progressive-enhancement-design-from-the-inside-out.2759516/

 

https://jsfiddle.net/hkchs08h/1/
Tested in Chrome, Firefox and Edge. It's a very close approximation, at least. You should realise that not all browsers are created equal, and give up on the "everything should look the same on every browser" - as long as things work, and look more or less the same (not considering older browsers with lacking CSS-support), it should do.

 

Thanks @PoPSiCLe,

Works great.