Chrome CSS問題

我有一個搜索框和按鈕，它在幾周前在所有瀏覽器（Chrome，FF，IE7/8/9，Opera）都能正常工作，但現在在Chrome中只是錯誤地偏移了一點。Chrome CSS問題

這是在Chrome enter image description here

這裏，它是在Opera，FF，IE enter image description here

通知輕微的Chrome偏移。下面是HTML對於這個搜索框，

<form id="function_search_form" method="post" class="span-24 textcenter last"> 
    <input type="text" name="basic_search_input" id="basic_search_input" /> 
    <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp; 

    <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a> 
    <input type="hidden" name="search_type" value="basic" /> 
    <div id="autocomplete_choices" class="autocomplete"></div> 
</form>

這裏是這些元素的CSS，

#function_search_form #basic_search_button { 
    border: 1px solid #FFFFFF; 
    border-radius: 0px 4px 4px 0px; 
    background: #FFFFFF; 
    vertical-align: middle; 
    height: 25px; 
    width: 27px; 
    margin: 0.5em 0px; 
    padding: 1px 0px; 
} 

#function_search_form #basic_search_input { 
    border: 1px solid #FFFFFF; 
    border-radius: 4px 0px 0px 4px; 
    color: #050; 
    font: bold 12px 'trebuchet ms', helvetica, sans-serif; 
    width: 250px; 
    height: 25px; 
    padding-right: 5px; 
    vertical-align: middle; 
}

我試圖包裹在一個div的輸入，並使用絕對位置或相對位置。然而，我改變的一切在其他一些瀏覽器中打破它，但在Chrome中修復它。這似乎也是，如果我採取垂直對齊的文本輸入，修復它在Chrome中。

我不確定這是否是最新版本的Chrome中引入的新錯誤，但我記得之前在Chrome中使用過，之後沒有任何更改。

更新史蒂夫·坎貝爾的解決方案

我不知道你是如何工作的，因爲如果我拿出一切，除了我的CSS文件，該HTML，

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"/> 
    <title></title> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 
</head> 

<body> 
    <form id="function_search_form" method="post" class="span-24 textcenter last"> 
     <input type="text" name="basic_search_input" id="basic_search_input" /> 
     <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp; 
     <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a> 
     <input type="hidden" name="search_type" value="basic" /> 
     <div id="autocomplete_choices" class="autocomplete"></div> 
    </form> 
</body> 
</html>

它看起來像以下，

enter image description here

我能想到的唯一的事情就是小提琴具有一些不同的重置或某事。

來源

2012-08-22 Metropolis

1px的差異？你有JSFiddle或其他我們可以在附近找到的實例嗎？ –

@RoddyoftheFrozenPeas沒有抱歉。它在一個私人密碼保護的應用程序。無法真正顯示這一切。你還在找什麼？我可以嘗試多給一點CSS和HTML，但是我不知道它有多大幫助。 – Metropolis

你正常化了CSS嗎？對於某些屬性，不同的瀏覽器往往具有不同的默認值。重置它們通常是一個好主意。 – toniedzwiedz

這fiddle適合我。使用相對和絕對方式進行樣式設置，並調整框尺寸以確保跨瀏覽器的一致性，並刪除了文件中的邊距：

#function_search_form 
{ 
    position: relative; 
} 
#function_search_form #basic_search_button { 
    border: 1px solid #FFFFFF; 
    border-radius: 0px 4px 4px 0px; 
    background: #FFFFFF; 
    height: 25px; 
    width: 27px; 
    margin: 0; 
    padding: 1px 0px; 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    position: absolute; 
    top: 4px; 
    left: 250px; 
} 

#function_search_form #basic_search_input { 
    border: 1px solid #FFFFFF; 
    border-radius: 4px 0px 0px 4px; 
    color: #050; 
    font: bold 12px 'trebuchet ms', helvetica, sans-serif; 
    width: 250px; 
    height: 25px; 
    padding-right: 5px; 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box;  
    position: absolute; 
    top: 4px;  
} 

#function_search_form a { 
    position: absolute; 
    top: 8px;  
    left: 280px; 
}

來源

2012-08-22 19:47:28

我確實嘗試過使用這些元素進行一些絕對定位，但每當我這樣做，它似乎在Chrome，FF，IE9中工作，但在IE7/8中，我不能擁有。你的特定CSS對我來說都是搞砸了。可能與小提琴中的事物有所不同，或者我身邊的事物不同。 – Metropolis

我剛剛意識到我們實際上正在使用其中包含重置的Blueprint。也許如果你將它添加到小提琴中，它可能會改變你所擁有的東西。 – Metropolis

編輯我的答案修復IE7 –

回答

相關問題