CSS：填充問題。需要幫助，請

我遇到在Chrome中一個奇怪的CSS問題的間距（但不是在Firefox和/或IE）CSS：填充問題。需要幫助，請

My site is here.

的「房地產搜索」之間的垂直間距在Firefox（ H2標籤）以及「舊金山，CA」（＃城市字段輸入標籤）的表單輸入字段是完美的，但在Chrome中，Chrome會施加比期望更多/更多的垂直間距。

爲了幫助，我附上了截圖。紅線表示Chrome添加的額外空間，Firefox/IE沒有。

enter image description here

任何想法，爲什麼Chrome是比Firefox & IE應用更間距。

以及如何解決此問題。

在此先感謝

UPDATE

我還使用了「重置樣式表」在所有瀏覽器規範H2間距等，可我的鏈接的HTML文檔中找到上面還仍然遇到這個問題。

來源

2010-09-13 JasonTT

什麼是Chrome的「檢測元素」，特別是其「度量標準」選項卡？ – 2010-09-13 17:13:48

@Pekka，它顯示margin-bottom和padding-bottom都是0。 – JasonTT 2010-09-13 17:27:22

我在想，行高是罪魁禍首。嘗試將h2的行高設置爲13至15像素左右。默認情況下它被設置爲正常。根據W3C，line-height：normal「告訴用戶代理根據元素的字體將使用的值設置爲」合理的「值。」 Firefox和Chrome可以設置不同的「合理」值，因爲它們建立在完全不同的渲染引擎上。

來源

2010-09-13 17:36:26

使用重置樣式表。

不同的瀏覽器以不同的方式解釋像H1，H2，UL，LI等標籤的CSS規則。這些包括填充和默認字體大小。重置樣式表會將所有這些值刪除，並刪除默認值，以便您可以根據自己的需要替換自己的值。

來源

2010-09-13 17:13:23 Robusto

我已經使用了一個重置樣式表，如我的CSS – JasonTT 2010-09-13 17:14:20

（甚至使用重置樣式表和我一樣，我仍然遇到這些問題）的頂部看到 – JasonTT 2010-09-13 17:24:02

根據Web Inspector，在Chrome中，您的輸入標記具有2px的頂部和底部邊距。但是，Firebug在Firefox中顯示的這個輸入沒有餘量。使用在你的CSS如下：

#city-field {margin:0}

編輯：因爲輸入設置爲顯示額外的間距所引起：inline-block的。如果將其更改爲顯示：block，則會注意到該空間消失。嘗試使用浮動和顯示：塊來取代內聯內容。

來源

2010-09-13 17:14:39

我剛更新了上面的實時代碼以使用您擁有的代碼，它仍然沒有幫助。 – JasonTT 2010-09-13 17:16:24

@JasonTT好涼快。我想，我已經用正確的問題更新了我的答案。 – 2010-09-13 17:30:48

如果我做＃city-field {display：block;}，那實際上消除了額外的間距問題;然而，然後將我的提交按鈕推到城市字段輸入字段下方的換行符。任何想法如何我可以保持提交按鈕在同一行作爲城市領域的輸入，同時也消除了時髦的額外間距？ – JasonTT 2010-09-13 17:37:23

嘗試設置height的正確性#city-field，比方說，在20px。

however。

來源

2010-09-13 17:29:10 achairapart

CSS：填充問題。需要幫助，請

回答

相關問題