2px difference FF and Chrome - css

Question

I need your help. How to fix that 2px difference? I really have no idea...
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav fr parent">
<li id="menu-item-99" class="menu-item menu-item-type-custom">
<div id="search">
<form method="get" action="site" >
<input type="text" name="s" placeholder=" search..." />
<input type="submit" value="" name="submit" />
</form>
</div>
</li>
</ul>
</nav>
And here is CSS:
#search {
float: left;
background: #000;
color: #fff;
}
#search input[type="text"]{
width: 95px;
background: #000;
color: #fff;
border: 0;
margin-left: 1px solid #fff;
#navigation {
float: right;
clear: none;
border: 0;
box-shadow: none;
width: 850px;
background: 0;
}
#navigation ul.nav {
float: right;
}
The Screenshot: http://i.stack.imgur.com/fYcBs.png

Answer 1

Your reset CSS doesn't work as you'd expect it to.
Styles computed for the submit input in FF are:
[name=submit] {
width: 6px;
padding: 3px 6px;
border-width: 3px;
}
which makes it 24px wide in total.
And for the Chrome:
[name=submit] {
width: 0;
padding: 1px 6px;
border-width: 2px;
}
which makes it 16px wide in total.
Here's an example: http://jsfiddle.net/n5u9L/2/
You should reset the padding, border-width and the width for this input, like this:
#search [name=submit] {
padding: 0;
width: 6px; /* or whatever you want */
border-width: 0;
}

Answer 2

Well, it's hard to read anything from the image you provided but I guess the problem is font rendering. As we can see from the CSS the #search is float: left, so its position will depend on the element that is on the left hand side of it. I assume that there is some text in the left container. Unfortunately you covered it with black rectangle and you didn't provide us any HTML of it.
The problem is, every browser renders font faces different even if they're the same font-family. Each letter might differ in width and spacing.
You must style your #search so that its position doesn't depend on the width of the element on the left side.