为什么linear-gradient在iPhone和Android资源管理器上不能显示（可以在PC资源管理器上显示）

Question

我正在构建这个登录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上正确显示，其他没有背景渐变。请告诉我为什么以及如何解决它。非常感谢。

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

为什么linear-gradient在iPhone和Android资源管理器上不能显示（可以在PC资源管理器上显示）

Why can't linear-gradient be displayed on iPhone and Android explorer (can be displayed on PC explorer)

html

css

linear-gradients