为什么在iPhone和Android资源管理器上无法显示linear-gradient（可以在PC资源管理器上显示）答案

【问题标题】：Why can't linear-gradient be displayed on iPhone and Android explorer (can be displayed on PC explorer)为什么在iPhone和Android资源管理器上无法显示linear-gradient（可以在PC资源管理器上显示）
【发布时间】：2021-06-17 17:01:15
【问题描述】：

我正在构建这个登录html文件，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Test</title>
        <link type="text/javascript" herf="jquery.js"/>
    </head>
    <body>
        <div id="div1">
            <input placeholder="Username:" class="inputter" id="inputter1"/>
            <input placeholder="Password:" class="inputter" id="inputter2"/>
            <button onclick="" id="button1">Submit</button>
        </div>
    </body>
    <style type="text/css">
        body{
                -webkit-font-smoothing: antialiased;
                visibility: visible;
                text-decoration: none;
                margin: 0;
                padding: 0;
                border: 0;
                font: inherit;
                font-size: 100%;
                vertical-align: baseline;
                box-sizing: border-box;
                overflow: hidden;
                -webkit-tap-highlight-color: transparent;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgb(243, 72, 104) 20.1814%, rgb(242, 71, 104) 20.1814%, rgb(158, 0, 236) 80.1832%);
        }
    </style>
</html>

当我尝试在PC、iPhone和Andriod web explorer上打开它时，我发现它只能在PC explorer上正确显示，其他的没有背景渐变。请告诉我为什么以及如何解决它。非常感谢。

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

从正文中删除position: absolute;。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Test</title>
        <link type="text/javascript" herf="jquery.js"/>
    </head>
    <body>
        <div id="div1">
            <input placeholder="Username:" class="inputter" id="inputter1"/>
            <input placeholder="Password:" class="inputter" id="inputter2"/>
            <button onclick="" id="button1">Submit</button>
        </div>
    </body>
    <style type="text/css">
        body{
                -webkit-font-smoothing: antialiased;
                visibility: visible;
                text-decoration: none;
                margin: 0;
                padding: 0;
                border: 0;
                font: inherit;
                font-size: 100%;
                vertical-align: baseline;
                box-sizing: border-box;
                overflow: hidden;
                -webkit-tap-highlight-color: transparent;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgb(243, 72, 104) 20.1814%, rgb(242, 71, 104) 20.1814%, rgb(158, 0, 236) 80.1832%);
        }
    </style>
</html>

【讨论】：

非常感谢！
@Maxwang 没问题，如果回答了您的问题，请将其标记为已回答（绿色复选标记）。