我如何調整我的CSS，以便當子標記的寬度為100％時，Firefox尊重填充？

Question

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    button {
      border-width: 1px;  
      border-style: solid;
      border-color: black;
      -moz-background-clip: padding-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 13px;
      height: 28px;
      padding: 0 10px 0 10px;
      max-width: 180px;
    }
    button > span {
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }
    .text {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }
  </style>
</head>
<button>
  <span>
    <span class="icon"></span><!-- This will push the text to the right when its shown -->
    <span class="text">Button text that is really, really long</span>
  </span>
</button>
</html>

上面的代碼包含完整的HTML頁面，可以將其復制/粘貼到文本編輯器中並在瀏覽器中呈現。 我在這里遇到的問題是，我需要文本填充100％的可用寬度，同時注意左側和右側的10px填充。 此處顯示的CSS適用於最新版本的Chrome，Safari和IE。 但是，在Firefox（版本7和8）中，不考慮填充。

我知道，如果我刪除填充並將文本的寬度更改為95％，它將看起來相似，但我希望盡可能避免這種情況。

請告知如何針對Firefox進行調整，然后在其他瀏覽器中繼續正常運行。 感謝您的時間。

Answer 1

我不完全確定這是最好的方法，但是它可以工作：

button::-moz-focus-inner {
    padding: 0 10px;
}

您的原始代碼： http : //jsbin.com/ebinem

使用我的修復程序： http : //jsbin.com/ebinem/2

我如何調整我的CSS，以便當子標記的寬度為100％時，Firefox尊重填充？

問題描述

1 個解決方案

解決方案1
1 2011-11-18 16:32:37

我如何調整我的CSS，以便當子標記的寬度為100％時，Firefox尊重填充？

問題描述

1 個解決方案

解決方案1 1 2011-11-18 16:32:37

解決方案1
1 2011-11-18 16:32:37