Mozilla padding在按鈕上的行爲不同

在我所有的按鈕上，填充在firefox中的行爲都不同。從研究中我知道這是因爲FF在默認樣式表中有一些奇怪的設置，但我已將常規修補程序添加到我的樣式表中。這很好，我可以忍受，除了一個按鈕不適合Firefox的工具欄，因爲填充使它太大。Mozilla padding在按鈕上的行爲不同

Jsfiddle here。

正常修復;

input[type=button]::-moz-focus-inner{padding:0; border:0;}

刪除了幾件東西的按鈕的CSS;

.buttonBlue {background-color:#008abd; border-radius:0.2em; 
      font-family:inherit; 
      color:white; border: 1px solid black; 
      cursor:pointer; 


      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008abd', endColorstr='#036b91'); 
      background: -webkit-gradient(linear, left top, left bottom, from(#008abd), to(#036b91)); 
      background: -moz-linear-gradient(top, #008abd, #036b91); 


    }

來源

2012-08-14 Jacob Windsor

你可能會改用

沒有效果，仍然是同樣的問題，但無論如何感謝 – 2012-08-14 13:22:53

如果將元素的外觀屬性設置爲none，任何運行良好的瀏覽器都會放棄它的gui風格。
https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

對於按鈕，外觀的默認值是「按鈕」。明確地將其設置爲「none」應該覆蓋瀏覽器的內置平臺原生樣式，包括奇怪的填充。

Firefox並不是唯一對此屬性作出反應的瀏覽器：Safari和Chrome監聽-webkit外觀變化，Opera監聽-o-appearance變化。我不知道MSIE9或10。

來源

2012-08-14 21:37:40 OmegaJunior

這根本沒有任何區別。我真的認爲它會，我甚至嘗試在CSS中設置它爲重要的，但沒有運氣 – 2012-08-14 22:12:36

我發現了一個修復，通過將目標moz與一個css前綴。這不是理想的，但它的作品，我需要移動到其他的東西，而不是擔心一個按鈕！無論如何，這是它。

@-moz-document url-prefix(){ 
          .buttonBlue 
          { padding:0px 7px 0px 4px !important;} 
          }

來源

2012-08-14 22:25:14

Mozilla padding在按鈕上的行爲不同

回答

相關問題