HTML-тег <button>странно отображается в Firefox - PullRequest
Новая
       15

HTML-тег <button>странно отображается в Firefox

3 голосов
/ 03 февраля 2010

У меня есть следующий код, который в основном отображает <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 считает, что «верх» кнопки фактически находится в середине кнопки.

Кто-нибудь сталкивался с таким поведением? Может быть, есть какое-то решение для этого?

Спасибо.

1 Ответ

0 голосов
/ 15 февраля 2010

Не уверен, был ли дан ответ на 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>
...