Веб-сайт выглядит по-разному в Chrome и Safari
я программирую приложение с Angular. И проблема в том, что моя кнопка выглядит иначе в Safari на моем iPhone, чем на моем смоделированном iPhone в Chrome.
в Хроме это выглядит так:
А на моем айфоне это выглядит так:
Я знаю, что это может быть проблемой, потому что я не реализовал ничего, связанного с 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>Хорошо, спасибо. Я отредактировал Вопрос.
Пожалуйста, разместите рабочий фрагмент, так как в данном коде недостаточно, чтобы узнать, как устанавливаются размеры.
Сделанный! Теперь вы должны понять это.
Это точная ошибка. В Chrome фрагмент выглядит так, как я хочу, но на моем iPhone фрагмент выглядит иначе.
Ответы 1
Данный код имеет несколько ошибок в HTML, таких как несколько экземпляров одного и того же идентификатора.
Ошибка, которая, скорее всего, сбивает с толку браузеры, поскольку они не обязательно будут знать, как вы хотите анализировать код, заключается в наличии элемента div (а также p) внутри элемента кнопки. Это запрещено спецификацией. См., например, div не допускается в качестве дочернего элемента кнопки
Пропустите свой код через валидатор W3C, чтобы получить полную информацию.
Тогда лучше всего сделать следующее, вероятно, изменить элементы кнопки для элементов div с классом = «кнопка», изменить CSS, который относится к кнопке, на .button
И проверьте и исправьте любые другие ошибки проверки.
Затем, если проблема не устранена, мы, по крайней мере, находимся на твердой почве для дальнейшего изучения, особенно на реализации class="row", когда внутренний div имеет высоту больше, чем контейнер, как в этом примере.
Ах, я знаю, что вы имеете в виду. Я удалил div и все остальное в кнопке, кроме <p>, но все по-прежнему.
p также не допускается в кнопке, хотя я не уверен, что это ваша основная проблема.
Можете ли вы включить больше соответствующего CSS, мы не знаем, какая ширина активной кнопки составляет 100%. Также минимальный HTML, чтобы мы могли воспроизвести проблему во фрагменте Stackoverflow. Спасибо.