Chrome 和 Safari 之间的网站看起来不同

Question

我正在使用 Angular 编写应用程序。问题是，我的按钮在 iPhone 中的 Safari 中看起来与在 Chrome 中的模拟 iPhone 中看起来不同。

在 Chrome 中看起来像这样：

在我的 iPhone 上它看起来像这样：

我知道这可能是个问题，因为我没有实现任何与 webkit 相关的东西，但是我找不到可以帮助我解决这个问题的 webkit 东西。

代码如下：

#colorPicker button {
    border: none;
    border-radius: 30px;
    width: 100%;
    height: 86%;
    position: relative;
    top: -6%;
    overflow: hidden;
}
#colorPicker i {
    color: white;
}

#colorPicker #second {
    background-color: rgb(48, 209, 88);
}
#colorPicker #third {
    background-color: rgb(12, 50, 102);
}
#colorPicker #fourth {
    background-color: rgb(0, 0, 0);
}
#content {
    overflow: hidden;
}
.resetSettings {
    border: none;
    padding: none;
    margin: none;
    border-radius: 25px;
    color: white;
}

#activeButton {
    color: white;
    background-color: rgb(88, 86, 214);
    width: 100%;
    height: 120%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border: none;
    padding: none;
    margin: none;
}
#settingsDatenschutz {
    width: 80%;
    border: none;
    background-color: transparent;
    padding: none;
    margin: none;
    margin-right: 10%;
    margin-left: 10%;
    border-radius: 25px;
    font-family: Arial, Helvetica, sans-serif;
}
#settingsDatenschutz p {
    font-size: 18pt !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
#settingsDatenschutz i {
    font-size: 18pt !important;
}
#datenschutz {
    margin: none;
    border: none;
    padding: none;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 102;
    background-color:  rgb(44, 44, 46);
    overflow-y: scroll;
}
#datenschutz button {
    width: 100%;
    bottom: 0;
    position: fixed;
    font-size: 20pt;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
    #content {
        background-color: white;
        color: black;
        border: none;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin: 5%;
        margin-top: 2%;
        width: 90%;
        position: relative;
        top: 12%;
        left: 0;
        right: 0;
        overflow: scroll;
        padding: 15px;
        font-size: 20pt;
    }
    #content i {
        font-size: 28pt;
        padding-top: 5px;
    }
    #content p {
        display: inline;
    }

    #view {
        z-index: 2;
        position: relative;
        top: 0;
        margin: none;
        width: 100%;
        height: 100%;
    }


    #colorPicker {
        width: 90%;
        height: 90%;
        margin: 5%;
        margin-top: 20%;
    }
    /* #colorPicker button {
        border: none;
        border-radius: 30px;
        width: 100%;
        position: relative;
        top: -6%;
    }
    #colorPicker i {
        color: white;
    }
    #colorPicker #default {
        background-color: rgb(10, 132, 255);
    }
    
    #colorPicker #second {
        background-color: rgb(48, 209, 88);
    }
    #colorPicker #third {
        background-color: rgb(12, 50, 102);
    }
    #colorPicker #fourth {
        background-color: rgb(0, 0, 0);
    } */
</style>

<div id="view">
    <div id="content">
        <br>
        <div id="colorPickerButtonView">
            <div class="row">
                <div id="firstMain" class="col-6">
                    <div class="activeColorFromColorPicker" id="colorPicker">
                        <button class="primaryColorDefault" alt="Hellblauer Hintergrund, weiße Schrift" onclick="colorPicker(0)" id="default">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                <div id="secondMain" class="col-6">
                    <div id="colorPicker">
                        <button alt="Helglgrüner Hintergrund, weiße Schrift" onclick="colorPicker(1)" id="second">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                
                <div id="thirdMain" class="col-6">
                    <div id="colorPicker">
                        <button alt="Dunkelblauer Hintergrund, weiße Schrift" onclick="colorPicker(2)" id="third">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                <div id="fourthMain" class="col-6">
                    <div id="colorPicker">
                        <button alt="Schwarzer Hintergrund, weiße Schrift" onclick="colorPicker(3)" id="fourth">
                            <br>
                            <i class="fab fa-accessible-icon"></i>
                            <br>
                            <div id="activeButton">
                                <p>Active!</p>
                            </div>
                        </button>
                    </div>
                </div>
                
            </div>
        </div>

    </div>
</div>


<router-outlet></router-outlet>

Answer 1

给定的代码在 HTML 中有几个错误，例如同一 ID 的多个实例。

最有可能混淆浏览器的错误是在按钮元素中有一个 div（还有一个 p）元素，因为它们不一定知道您希望如何解析代码。这在规范中是不允许的。参见示例 div not allowed as child element of button

运行您的代码通过 W3C 验证器获取完整的详细信息。

那么接下来最好的办法可能是将div元素的按钮元素更改为class="button"，将指代按钮的CSS更改为。按钮

并检查并更正任何其他验证错误。

然后，如果问题没有解决，我们至少在坚实的基础上可以进一步观察 - 特别是当内部 div 具有高度时 class="row" 的实现比本例中的容器大

Chrome 和 Safari 之间的网站看起来不同

Website looks different between Chrome and Safari

html

css

webkit