FF和Chrome相差2px

Question

我需要你的帮助。如何解决 2px 的差异？我真的不知道...

 <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>

这里是 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; 
   }

截图：http://i.stack.imgur.com/fYcBs.png

Answer 1

您的重置 CSS 无法正常工作。
为 FF 中的提交输入计算的样式是：

[name=submit] {
    width: 6px;
    padding: 3px 6px;
    border-width: 3px;
}

总共 24px 宽。

对于 Chrome：

[name=submit] {
    width: 0;
    padding: 1px 6px;
    border-width: 2px;
}

这使它总共 16px 宽。

这是一个例子：http://jsfiddle.net/n5u9L/2/

您应该为此输入重置padding、border-width 和width，如下所示：

#search [name=submit] {
    padding: 0;
    width: 6px; /* or whatever you want */
    border-width: 0;
}

Answer 2

嗯，很难从您提供的图像中读取任何内容，但我想问题在于字体渲染。正如我们从 CSS 中看到的那样，#search 是float: left，所以它的位置将取决于它左侧的元素。我假设左侧容器中有一些文本。不幸的是，您用黑色矩形覆盖了它，并且没有向我们提供它的任何 HTML。

问题是，每个浏览器都会呈现不同的字体，即使它们是相同的font-family。每个字母的宽度和间距可能不同。

您必须设置#search 的样式，使其位置不取决于左侧元素的宽度。