0

我需要你的帮助。如何解决 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

4

2 回答 2

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;
}
于 2013-11-15T17:12:19.027 回答
0

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

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

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

于 2013-11-15T16:47:35.543 回答