时间戳

首页 > 解决方案 > 为什么某些 css 元素在 iphone 上不起作用？

html - 为什么某些 css 元素在 iphone 上不起作用？

问题描述

当 iphone 浏览器（safari 和 chrome）在桌面和安卓设备上完全正常工作时，我遇到了一些 css 元素的问题。

我附上了 2 张登录屏幕的图像作为示例之一，此屏幕的代码如下：

@font-face {
    font-family: 'Gidole Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gidole Regular'), url('../fonts/Gidole-Regular.woff') format('woff');
    }

body {
    max-width: 1920px;
    max-height: 1920px;
    background: #eee;
}



.Title {
    margin-left: 20px;
    margin-right: 20px;
    font-family: industry-inc-3d, sans-serif;
    height: 128px;
    font-weight: normal;
    font-size: 45px;
    line-height: 60px;
    text-align: center;
    color: #f05d5b;
}

.flashed-messages
{
    font-family: industry-inc-3d, sans-serif;
    height: 24px;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    color: #f05d5b;
    /* border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    margin-top: 10px; */
}


.form {
    margin: 0 auto;
    display: table;
}

.email-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    position: relative;
}

.email {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.password-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    position: center;

}

.password {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.button-signin {
    margin: 0 auto;
    width: 143px;
    height: 27px;
    font-family: industry-inc-3d, sans-serif;
    font-weight: normal;
    font-size: 21px;
    text-align: center;
    color: #f05d5b;
    width: 150px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
}

.button {
    text-align: center;
}

.signup-text{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup-link{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup {
    margin-top: 30px;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sign in</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sign_in.css') }}">
    <link rel="stylesheet" href="../static/css/sign_in.css">
    <!-- <link rel="stylesheet" type="text/css" href="precious.css"> -->
    <link rel="stylesheet" href="https://use.typekit.net/oaq5uou.css">
    <style>
        @import url("https://use.typekit.net/oaq5uou.css");
      </style>
</head>
<body>

    <h1 class="Title">Welcome To Precious</h1>
    <div class="flashed-messages">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>
    <div class="form">
        <form class="form-signin" method="POST">
            <div>
                <div><label class="email" for="email">Email</label></div>
                <div><input class="email-box" type="email" name="email"></div>
            </div>
                <br>
            <div>
                <div><label class="password" for="password">Password</label></div>
                <div><input class="password-box" type="password" name="password"></div>
            </div>
                <br>
            <div class="button">
                <input type="submit" name="submit" value="Sign In" class="button-signin" >
            </div>
        </form>

       

        <div class="signup">
            <a class="signup-text">No account? </a>
            <a href="/sign_up" class="signup-link">sign up</a>
        </div>
    </div>

</body>
</html>

Dektop 或 android 浏览器

苹果浏览器

任何人都知道为什么会发生这种情况？

标签： htmlcss

解决方案

我猜你需要前缀。

这是一个很好的网站：

https://autoprefixer.github.io/

将您的代码复制/粘贴到格式化程序中并复制格式化的 CSS 代码。

试试这个 CSS 代码：

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@font-face {
    font-family: 'Gidole Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gidole Regular'), url('../fonts/Gidole-Regular.woff') format('woff');
    }

body {
    max-width: 1920px;
    max-height: 1920px;
    background: #eee;
}



.Title {
    margin-left: 20px;
    margin-right: 20px;
    font-family: industry-inc-3d, sans-serif;
    height: 128px;
    font-weight: normal;
    font-size: 45px;
    line-height: 60px;
    text-align: center;
    color: #f05d5b;
}

.flashed-messages
{
    font-family: industry-inc-3d, sans-serif;
    height: 24px;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    color: #f05d5b;
    /* border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    margin-top: 10px; */
}


.form {
    margin: 0 auto;
    display: table;
}

.email-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    -webkit-box-shadow: 4px 4px 0px #f05d5b;
            box-shadow: 4px 4px 0px #f05d5b;
    position: relative;
}

.email {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.password-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    -webkit-box-shadow: 4px 4px 0px #f05d5b;
            box-shadow: 4px 4px 0px #f05d5b;
    position: center;

}

.password {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.button-signin {
    margin: 0 auto;
    width: 143px;
    height: 27px;
    font-family: industry-inc-3d, sans-serif;
    font-weight: normal;
    font-size: 21px;
    text-align: center;
    color: #f05d5b;
    width: 150px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    -webkit-box-shadow: 4px 4px 0px #f05d5b;
            box-shadow: 4px 4px 0px #f05d5b;
}

.button {
    text-align: center;
}

.signup-text{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup-link{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup {
    margin-top: 30px;
    text-align: center;
}

推荐阅读