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（以及 ap）元素。 這在規范中是不允許的。 參見例如div not allowed as 按鈕的子元素

通過 W3C 驗證器運行您的代碼以獲取完整的詳細信息。

那么接下來要做的最好的事情可能是更改帶有class =“button”的div元素的按鈕元素，將引用按鈕的CSS更改為.button

並檢查並更正任何其他驗證錯誤。

然后，如果問題沒有得到解決，我們至少有堅實的基礎可以進一步了解 - 特別是當內部 div 的高度大於容器（例如本例中的容器）時 class="row" 的實現