css - 2px 差异 FF 和 Chrome

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

这使得它总共 24 像素宽。

对于 Chrome:

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

这使得它总共 16 像素宽。

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

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

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