webkit瀏覽器取代按鈕

所以我有一個36px高的div與表格（#refine_search）在其中。表單只包含一個35像素高的按鈕（#refine_search_button）。一切都很好，直到我在字體大小超過17px的表單之後添加一個span。此時，該按鈕將顯示在div上方2或3像素的下方。webkit瀏覽器取代按鈕

enter image description here

在這裏你可以看到在行動吧： http://nolasatellitegovernment.tulane.edu/search.php

CSS：

#bluenav { 
    width:1124px; 
    height:36px; 
    position:relative; 
    background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff; 
} 

    #refine_search { 
     display:inline; 
     padding:0 0 0 110px; 
     margin:0; 
    } 

    #refine_search_button { 
     width:92px; 
     height:35px; 
     background:url(/g/refine_search_button.jpg) no-repeat; 
     border:0; 
     padding:0; 
     margin:0; 
    } 

    #refine_search_button:hover { 
     background:url(/g/refine_search_button_over.jpg) no-repeat; 
    } 

    .big_heading { 
     font-size:22px; 
     font-weight:bold; 
    }

和代碼看起來像

<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px"> 
</div>

有誰知道爲什麼18像素的文本將取代precedin g按鈕在35px高的容器中？

來源

2011-09-09 jerrygarciuh

#refine_search { 
    display:block; 
    float: left; 
    padding:0 0 0 110px; 
    margin:0; 
}

來源

2011-09-09 00:32:12 atma

工程太棒了！謝謝！ – jerrygarciuh

只需在您的#refine_search_button ID中添加一個line-height:36px即可解決問題。

來源

2011-09-09 00:29:05

的偉大工程！謝謝！ – jerrygarciuh

將vertical-align: top加到#refine_search_button。

默認vertical-align值爲baseline，並且添加帶有不同font-size的span可調整基線的位置。

如果您還想垂直居中「索引結果」文本，請將line-height: 36px添加到包含span的文件中。

來源

2011-09-09 00:29:13 thirtydot

太棒了！謝謝！ – jerrygarciuh

因爲你使用顯示：內聯它們是互相依賴的，就像在同一行上的圖像和文字。請嘗試使用display：block;向左飄浮;在這兩個元素，那麼他們總會浮起頂端:)

它甚至可能與顯示器搭配使用：inline-block的;

IMO其更好做generel更好的編碼比使用的line-height等來解決動態問題（即你改變字體大小等）

來源

2011-09-09 00:29:40

webkit瀏覽器取代按鈕

回答

相關問題