html <button> 标签在 Firefox 中呈现异常答案

【问题标题】：html <button> tag renders strangely in Firefoxhtml <button> 标签在 Firefox 中呈现异常
【发布时间】：2011-01-12 15:52:45
【问题描述】：

我有以下代码，基本上显示一个<button>，在按钮内有两个<div>s，一个在按钮的左上角对齐，另一个在右下角对齐：

<html>
  <head>
    <style>
      <!--
      .button {
      width: 300px;
      height: 200px;
      background-color: yellow;
      position: relative;
      padding: 0px;
      }

      .child_top_left {
      position: absolute;
      top: 5px;
      left: 5px;
      background-color: blue;
      }

      .child_bottom_right {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: red;
      }
    -->
    </style>
  </head>
  <body>
    <button class="button">
      <div class="child_top_left">top-left</div>
      <div class="child_bottom_right">bottom-right</div>
    </button>
  </body>
</html>

在 Internet Explorer 或 Safari 中一切正常，但在 Firefox 中显示有些奇怪。看起来 Firefox 认为按钮的“顶部”实际上位于按钮的中间。

有人遇到过这种行为吗？也许有一些解决方法？

谢谢。

【问题讨论】：

我在 IE8 中看不到 bottom-right，top-left 位于底部而不是顶部
问题确实属于 doctype.com
我在 IE7 中尝试过，它们显示正常...也许 IE7 是错误的，而 IE8 和 FF 的做法是正确的？但是为什么要考虑中间线是“顶部”？
我认为将 div 包装在按钮中是完全错误的，您可能需要对按钮使用 ´`。检查 doctype.com ，这是 webguys 回答你问题的地方。
也发布到 doctype.com。感谢您的提示。

标签： html firefox button alignment

【解决方案1】：

不确定这是否已在 DocType 上得到解答，但我设法在 Firefox 中找到了一个简单的解决方法；我没有要测试的 IE 实例，但基本上，您只需将按钮内容包装在 div 中：

<html>
  <head>
    <style>
      <!--
      .button {
      width: 300px;
      height: 200px;
      background-color: yellow;
      position: relative;
      padding: 0px;
      }

      .child_top_left {
      position: absolute;
      top: 5px;
      left: 5px;
      background-color: blue;
      }

      .child_bottom_right {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: red;
      }

      .button_container {
          width: 300px;
          height: 200px;
      }
    -->
    </style>
  </head>
  <body>
    <button class="button">
      <div class="button_container">
          <div class="child_top_left">top-left</div>
          <div class="child_bottom_right">bottom-right</div>
      </div>
    </button>
  </body>
</html>

【讨论】：