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中看到的那样#search是float: left，所以它的位置将取决于它左侧的元素。我假设左侧容器中有一些文本。不幸的是，你用黑色矩形覆盖它并且你没有向我们提供它的任何HTML。

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

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

Answer 2

您的重置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;
}

2px差异FF和Chrome

2 个答案: