2px區別FF和Chrome

我需要你的幫助。如何解決2px的差異？我真的不知道......2px區別FF和Chrome

<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

來源

2013-11-15 user2997001

是否使用復位樣式表？ – grimmus

您使用的是CSS重置？一個好的可以在這裏找到（http://html5doctor.com/html-5-reset-stylesheet/）。 –

您是否檢查過「邊距」和「填充」？ – Sirko

嗯，這是很難讀你提供的，但我想任何圖像問題是字體渲染。正如我們從CSS看到的#search是float: left，所以它的位置將取決於它左側的元素。我假設在左邊的容器中有一些文字。不幸的是，你用黑色的矩形覆蓋它，你沒有提供任何它的HTML。

問題是，每個瀏覽器都呈現不同的字體，即使它們是相同的font-family。每個字母的寬度和間距可能不同。

您必須設置樣式#search，以便其位置不取決於左側元素的寬度。

來源

2013-11-15 16:47:35 matewka

我將首先檢查字體家族... - >>> aaaand它不是那個。 – user2997001

我沒有說這是'font-family'的不同。我說，與**相同**'font-family'在不同的瀏覽器中輸出可能會有所不同。 – matewka

您重置的CSS不能像您期望的那樣工作。
樣式計算了在FF提交輸入是：

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

這使得它24px的總寬。

而對於鉻：

[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-15 17:12:19 matewka

2px區別FF和Chrome

回答

相關問題