Html 为什么有些css元素在iPhone上不起作用？

我对iphone浏览器safari&chrome上的一些css元素有一个问题，当它在桌面和android设备上完全正常工作时，这些css元素正在崩溃

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

@字体{ 字体系列：“Gidole常规字体”； 字体风格：普通； 字体大小：正常； src:local'Gidole Regular'，url'../font/Gidole Regular.woff'格式为'woff'； } 身体{ 最大宽度：1920像素； 最大高度：1920像素； 背景：eee； } .头衔{ 左边距：20px； 右边距：20px； 字体系列：industry-inc-3d，无衬线； 高度：128px； 字体大小：正常； 字体大小：45px； 线高：60px； 文本对齐：居中； 颜色：f05d5b； } .即时消息 { 字体系列：industry-inc-3d，无衬线； 高度：24px； 字体大小：正常； 字体大小：15px； 文本对齐：居中； 颜色：f05d5b； /*边框：1.5px实心f05d5b； 盒影：4px4px0pxf05d5b； 边缘顶部：10px*/ } .表格{ 保证金：0自动； 显示：表格； } .邮箱{ 宽度：300px； 高度：50px； 背景：f6f7f7； 边框：1.5px实心f05d5b； 盒影：4px4px0pxf05d5b； 位置：相对位置； } .电邮{ 宽度：299px； 高度：24px； 字体系列：工业公司基地，无衬线； 字体大小：正常； 字体大小：20px； 线高：26px； 文本对齐：左对齐； 颜色：7070； } .密码箱{ 宽度：300px； 高度：50px； 背景：f6f7f7； 边框：1.5px实心f05d5b； 盒影：4px4px0pxf05d5b； 位置：中心； } .密码{ 宽度：299px； 高度：24px； 字体系列：工业公司基地，无衬线； 字体大小：正常； 字体大小：20px； 线高：26px； 文本对齐：左对齐； 颜色：7070； } .按钮符号{ 保证金：0自动； 宽度：143px； 高度：27px； 字体系列：industry-inc-3d，无衬线； 字体大小：正常； 字号：21px； 文本对齐：居中； 颜色：f05d5b； 宽度：150px； 高度：50px； 背景：f6f7f7； 边框：1.5px实心f05d5b； 盒影：4px4px0pxf05d5b； } .按钮{ 文本对齐：居中； } .注册文本{ 字体系列：Gidole常规字体； 宽度：218px； 高度：18px； 字体大小：正常； 字体大小：16px； 线高：26px； 颜色：7070； 不透明度：0.5； 文本对齐：居中； 位置：相对位置； } .注册链接{ 字体系列：Gidole常规字体； 宽度：218px； 高度：18px； 字体大小：正常； 字体大小：16px； 线高：26px； 颜色：7070； 不透明度：0.5； 文本对齐：居中； 位置：相对位置； } .注册{ 边缘顶部：30px； 文本对齐：居中； } 登录 -> @进口urlhttps://use.typekit.net/oaq5uou.css; 欢迎来到贵公司 {%with messages=get_flashed_messages%} {%if消息%} {消息%中的消息为%s} {{message}} {%endfor%} {%endif%} {%endwith%} 电子邮件 暗语

---

我想你需要前置器

这是一个很好的网站：

将代码复制/粘贴到格式化程序中，并复制格式化后的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;
}

---

一些浏览器为表单元素添加了自己的样式。您需要使用以下方法将其删除：

.thing {
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

欢迎来到SO，Maher

---

尝试删除标题和闪现消息的高度属性。在小屏幕上，副本将在多行上断开，但高度仍然相同。在这种情况下，文本将与下面的内容重叠。只有当您使用的特定设备的屏幕宽度小于您使用的安卓系统时，您才可能在iPhone上体验到这一点。

您好，欢迎光临。这是因为浏览器应用了一些默认样式。你可以重置/覆盖这个样式。你能分享一下iPhone上的元素是如何被破坏的屏幕截图吗？我注意到你在标题和信息上设置了固定的高度-这可能是你的问题，因为内容太过压缩，甚至重叠。使用边距底部来定义元素之间的空间。高度适用于主图像，但不适用于文本形式的动态内容。需要覆盖某些默认样式。想知道为什么iphone会这么做吗？谢谢你Ifaruki。通过覆盖默认外观解决了这些问题。现在一切正常。谢谢你花时间帮忙！