CSS：Firefox中按钮的绝对定位

问题描述：

我想显示一个按钮，它将自己绝对定位的父级的所有空格。（所有在Chrome和Safari（Webkits）中运行完美，我无法在IE上测试，因为我在Mac上（如果任何人都可以测试并在评论中说，如果它运行与否，这将是非常好的））。CSS：Firefox中按钮的绝对定位

的目标实现的是：

enter image description here

股利和按钮一起由包裹这是绝对定位含有。

的HTML代码是：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      .wrapper { 
       background-color: red; 
       position: absolute; 
       width: 100px; 
       height: 100px; 
      } 

      .inner { 
       background-color: blue; 
       position: absolute; 
       top: 0px; 
       bottom: 0px; 
       left: 0px; 
       right: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrapper" style="top: 50px; left: 50px;"> 
      <div class="inner">div</div> 
     </div> 

     <div class="wrapper" style="top: 50px; left: 200px;"> 
      <button class="inner">button</button> 
     </div> 
    </body> 
</html>

这是相当简单的。问题是，在Firefox，它呈现这样的：

enter image description here

你有火狐为什么呈现此代码这样任何想法和你有使用类似定位的任何解决方法吗？

编辑：我不能（我不想）设置内部孩子的宽度和高度。原因是我使用GWT和布局机制。 GWT布局使用bottom/top/left/right来定位和调整元素的大小，所以我无法改变这种行为。所有运行与经典div。问题只与按钮有关。

有你尝试设置显示：块？ –

是的，我在你问之前就已经测试过了。它什么都不做 –

答

它呈现这样的原因是，<button>是替换元素至少在Gecko和用于替换元素是什么left: 0; right: 0意味着CSS规则是不同的比他们的非替换元素...

好的，替换元素似乎是这个问题的原因。谢谢！关于替换元素的更多信息：http://reference.sitepoint.com/css/replacedelements –

这是问题的解释，有没有解决这类问题的方法？（我更喜欢使用按钮，因为它将中间的文字对齐）。 –

你可以使用'left：0;宽度：100％;' –

答

还设置内部div的宽度和高度。

我不能使用宽度或高度，因为我使用GWT的布局机制，它使用底部/顶部/左/右设置尺寸 –

@Jerome：输入'width：100％'和'height： 100％'比'右：0'和'bottom：0'？ – Wabbitseason

试试“float：left;”而不是“位置，顶部，底部，左侧，右侧”。 –

答

尝试增加

min-width: -moz-available;

到.inner声明。

我发现它甚至可以在Internet Explorer 7+中运行。在IE6中它失败了，但这并不令人意外。不幸的是，它也在Opera中与Firefox最初的方式失败。

这解决了Firefox中的问题。没有人关心歌剧，因为歌剧是100％未使用（至少在我的网站），并转向webkit！ –

CSS：Firefox中按钮的绝对定位

相关推荐