All geek questions in one place

Html <button> tags are displayed in Firefox

I have the following code, which basically displays <button>two <div>s inside the button , one aligned in the upper left corner of the button, the other in the lower right corner:

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

Everything works fine in Internet Explorer or Safari, but something seems strange in Firefox. Firefox seems to think the top of the button is in the middle of the button.

Has anyone encountered this behavior? Maybe there is some workaround?

Thank.

+3
source share
1 answer

, 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>
0

Source: https://habr.com/ru/post/1731222/

More articles:


All Articles