html<；按钮>；标签在Firefox中呈现出奇怪的效果_Html_Firefox_Button_Alignment

html<；按钮>；标签在Firefox中呈现出奇怪的效果

html firefox button

html<；按钮>；标签在Firefox中呈现出奇怪的效果,html,firefox,button,alignment,Html,Firefox,Button,Alignment,我有以下代码，基本上显示一个，在按钮内部有两个s，一个在按钮的左上角对齐，另一个在右下角对齐： <html> <head> <style> <!-- .button { width: 300px; height: 200px; background-color: yellow; position: relative; padding: 0px; }

我有以下代码，基本上显示一个

，在按钮内部有两个

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>


左上角
右下角

在InternetExplorer或Safari中，这一切都可以正常工作，但在Firefox中，有些东西显示得很奇怪。看起来Firefox认为按钮的“顶部”实际上位于按钮的中间

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

谢谢。

我不确定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>


左上角
右下角

我在IE8中看不到

右下角

，而

左上角

更多的是在底部而不是顶部。这个问题实际上属于doctype.com，我在IE7中尝试过，它们显示得很好。。。也许IE7是错误的，而IE8和FF的做法是正确的？但是，为什么要把中间线看成是“顶部”呢？我认为按钮中的div的包装是完全错误的，并且您可能需要使用“一个按钮”。检查，这是网络人回答你问题的地方。也发布到doctype.com。谢谢你的提示。