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，以便Firefox在子标记宽度为100％时尊重填充？

1 个答案: