Animation.css 和 <forms>：错误答案

【问题标题】：Animation.css and <forms>: BugAnimation.css 和 <forms>：错误
【发布时间】：2021-07-11 20:58:54
【问题描述】：

我正在使用https://animate.style/，当我包含时

link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

在以下代码中：

<!DOCTYPE html>
<html>
  <head style = "background: black">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  </head>
  <body style = "background: black" class = "animate__animated animate__backInDown animate_slower">
    <div style="position:absolute; left: 40%;">
      <h1 id = "" style="color:white">EXAMPLE</h1>
    </div>
    <button id = "about" style="position: absolute; right: 5%; top: 0%;" >About</button>
    <div class="scripts">
      <script type="text/javascript">
        var buttons = document.getElementsByTagName("button");
        for (let i = 0; i < buttons.length; i++) {
          buttons[i].addEventListener("click", onButtonClick, false);
        };
        function onButtonClick(event) {
                    if(event.target.id === "about"){
                        window.location.href = "about.html";
                    }else{
              return;
            }
          }
      </script>
    </div>
    <div style="position: absolute; bottom: 24%; left: 1%">
      <form id = "">
        <input type="text" placeholder="Your Address" >
      </form>
    </div>
  </body>
</html>

如果我不包含它，我会得到非常不同的定位。

它似乎只影响“顶部”和“底部”命令，除非它与“按钮”一起使用。

有人知道为什么会出现这个问题吗？

干杯，

【问题讨论】：

标签： css

【解决方案1】：

通过添加 cdn 并在正文中使用这些类 "animate__animated animate__backInDown animate_slower" 会丢失 <body> 标记中的固有属性，从而导致百分比度量丢失。请记住，百分比测量值取自父组件。

解决办法是这样的：

 <html style="width: 100%; height: 100%;">
  <head style="background: black;">
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
      rel="stylesheet"
    />
  </head>
  <body
    style="background: black; width: 100%; height: 100%;"
    class="animate__animated animate__backInDown animate_slower"
  >

I'll leave you a codesandbox with your complete code

【讨论】：