跨度标签可以继承在Firefox其输入的身高父？ [英] Can a span tag inherit its input's height parent in Firefox?

问题描述

我在得到一个SPAN问题（或DIV）按钮里面去到按钮的Firefox（版本20）。

全高

http://jsfiddle.net/spiderplant0/BwwuV/

据在IE10和Chrome的正常工作。

除了只计算每个按钮的高度和PX明确设置它，没有人知道是否有这个解决方案？

 ＃{id1_container
    显示：块;
    文字修饰：无;
    光标：指针;
    箱阴影：无;
    背景：无;
    -webkit-用户选择：无;
    -moz-用户选择：无;
    用户选择：无;
    宽度：100像素;
    高度：100像素;
    填充：0;
    边框：1px的固体绿色;
}＃id1_container＆GT; * {
    显示：块;
    高度：100％;
    宽度：100％;
    背景：粉红色;
}＆LT;按钮式=按钮ID =id1_container＆GT;＆LT;跨度＆GT;＆打招呼LT; / SPAN＆GT;＆LT; /按钮＆GT;
 

解决方案

您需要包装在 DIV 按钮 C>为了使高度生效。

 ＆LT; D​​IV＆GT;
  ＆LT;按钮式=按钮ID =id1_container＆GT;
      ＆LT;跨度＆GT;＆打招呼LT; / SPAN＆GT;
  ＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

工作实例

要与你完全诚实的，这背后的理由还是有点我不清楚，我试图找出自己。我所知道的是，这是解决您的问题，而不只是方式的破解的像其他人所说。

I'm having a problem getting a SPAN (or DIV) inside a button to go to the full height of the button in Firefox (Version 20).

http://jsfiddle.net/spiderplant0/BwwuV/

It works fine in IE10 and Chrome.

Other than just calculating the height for each button and setting it explicitly in px, does anyone know if there is a solution to this?

#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>

解决方案

You need to wrap the button in a div in order for the height to take effect.

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

Working example

To be completely honest with you, the reasoning behind this is still a bit unclear to me, I'm trying to figure it out myself. All I know is this is the only way to fix your issue without a hack like others have suggested.

这篇关于跨度标签可以继承在Firefox其输入的身高父？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！