Working example

Question

我在按钮内获得SPAN（或DIV）时遇到问题，无法在Firefox（版本20）中使用该按钮的全部高度。

它在IE10和Chrome中运行良好。

除了计算每个按钮的高度并在px中明确设置之外，是否有人知道是否有解决方案？

#id1_container {
    display: block; 
    text-decoration: none; 
    cursor: pointer; 
    box-shadow: none;
    background: none;
    -webkit-user-select: none;
    -moz-user-select: none; 
    user-select: none; 
    width: 100px;
    height: 100px;
    padding: 0;
    border: 1px solid green;
}

#id1_container > * {
    display: block;
    height: 100%;
    width: 100%;
    background: pink;
}

<button type="button" id="id1_container"><span>hello</span></button>

Answer 1

您需要将button包裹在div中，以使高度生效。

<div>
  <button type="button" id="id1_container">
      <span>hello</span>
  </button>
</div>

Working example

对你说实话，这背后的原因对我来说仍然有点不清楚，我正试图弄清楚自己。我所知道的是，这是解决问题的唯一方法，而不像其他人建议的 hack 。

Answer 2

由于您没有为span重置边距和填充，因此对我来说这似乎是个问题。正如@Rockafella建议的那样，使用绝对定位的跨度会起作用，因此它对我来说并不理想，因为你的跨度有100％的宽度和高度。因此，尝试在标记之前使用CSS重置代码，例如Eric Meyer @ http://meyerweb.com/eric/tools/css/reset/

提供的代码。

span标记是否可以在Firefox中继承其输入的高度父级？

2 个答案:

Working example