Question

我有以下代码基本上显示<button>，按钮内有两个<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;
      }
    -->
    </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认为按钮的“顶部”实际上位于按钮的中间。

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

感谢。

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

html <button>标签在Firefox </button>中呈现奇怪的效果

1 个答案: