Firefox和Chrome填充區別

firefox和chrome在css中填充填充的方式有所不同。在Chrome中顯示正確的是在Firefox中額外填充的內容。有沒有辦法解決？Firefox和Chrome填充區別

.button { 
    font-family: helvetica, arial; 
    font-size: 64px; 
    width: 70px; 
    height: 45px; 
    font-weight: bold; 
    padding: 0px; 
    padding-top: 25px; 
    background-color: #000; 
    color: #fff; 
    text-align: center; 
    float: right; 
    margin: 7px 10px 0 0; 
}

來源

2011-03-20 amit

你確定這不是'行高'問題嗎？ – 2011-03-20 18:50:00

如果您有演示頁面，這將有所幫助。 – 2011-03-20 18:50:08

在這個演示中，我沒有看到任何區別http://jsfiddle.net/W22DC/ – Sotiris 2011-03-20 18:54:37

如果您.button是button這可能是一個Mozilla內對焦的事情......試試這個？

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }

來源

2011-03-20 18:51:36 superUntitled

Thankyou ...浪費了2個小時，但如果沒有這個答案，它可能會更多......;） – BizNuge 2012-04-17 22:21:28

@amit：如果這是正確的答案，那麼您應該接受它。 – tw16 2012-05-05 02:12:37

這解決了這個問題.. Mozilla的想法是什麼？：| – Steve 2012-07-02 15:33:54

Firefox和Chrome呈現padding完全一樣。你的問題在別處。

您使用重置CSS嗎？否則，默認的line-height聲明可能會干擾您的按鈕呈現。

首先，你的height比你的font-size小。由於您沒有指定overflow，因此您的height將始終延伸到至少font-size（或任何line-height指定的值）。

如果您的.button類實際上是<button>元素，那麼也應用superUntitled fix。

來源

2011-03-20 18:56:03

在Firefox中，div的寬度/高度被賦予寬度/高度+填充。在其他瀏覽器中，填充不會將該值添加到div的大小。 – poepje 2012-06-04 14:57:55

reset.css在渲染填充中的作用是什麼？我使用WordPress的兒童主題，我看到不同程度的填充Firefox和鉻。 – Chirag 2013-06-17 14:22:34

@poepje：這是不真實的。 Firefox使用W3C盒子模型。 @Chirag：不同的瀏覽器對元素的默認樣式有不同的值。 'reset.css'對這些值進行規範化處理，以便在所有瀏覽器中基本樣式相同。 – 2013-06-17 16:31:15

你確實是對的 - Firefox中存在一個錯誤，其中按鈕元素的行高不能通過CSS line-height屬性進行更改。

請參閱此鏈接的詳細信息：http://www.cssnewbie.com/input-button-line-height-bug/

的解決方案是使用填充，而不是行高。

來源

2011-04-27 02:08:19

-1

我工作的方式是設置對象的高度，以便firefox，chrome和opera以相同的方式渲染它，並刪除所有填充。

.footertext6{ 
    float: left; 
    padding-top:10px; 
    width: 160px; 
    height:102px; */setting height here*/ 
    background-color:#ffffff; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    font-size: 15px; 
    border-top-right-radius: 50px;  
}

來源

2012-12-30 16:30:55

焦點內部修復工程，但我也添加負頂部和底部邊距，以使其達到正確的高度。例如： -

*::-moz-focus-inner { 
padding: 0; 
border: 0; 
margin-top:-1px; 
margin-bottom:-1px; 
}

我以前很喜歡火狐，但它已成爲一個臃腫的爛攤子，我的聖誕名單年前掉了下來。

來源

2014-03-27 20:08:50

Firefox和Chrome填充區別

回答

相關問題