Kundako
@Kundako
Просто дизайнер, интерфейсов и своей жизни.

Почему некорректно отображается шрифт в em на safari mobile (iPhone)?

Добрый день. Имеется три блока .footer1, .footer2 и .footer3. В стиле .footer1 p шрифт имеет значение font-size:0.9em, такое же значение имеет ссылки в стиле .footer3. Шрифт этих элементов должен быть одинаковым размером, как и есть во всех браузерах на пк, в том числе и на android. Однако на iPhone в Safari шрифт ссылок больше ежели в параграфе, в чем может быть проблема?

#footer {
	width:90%;
	display: flex;
	align-items:center;
        flex-direction: column;
}
.footer1 {
	margin-top:30px;
	margin-bottom:12px;
	width:100%;
	float:left;
	position:relative;
	z-index:1;
	overflow:hidden;
	text-align:center;
	padding-top:2vh;
}

.form {
	display: flex;
	justify-content:center;
}

.mail {
	width:85%;
	max-width:470px;
	height:42px;
	background-color:transparent;
	border:1px solid #ccc;
	text-align:center;
	outline: none;
	position:relative;
	color:#f5f5f5;
	-webkit-border-radius: 0;
	border-radius: 0;
	box-sizing: border-box;
}

.button{
	background-image: url(../images/b.png);
	background-size: cover;
	background-position:center;
	width:42px;
	height:42px;
	border:1px solid #E73280;
	border-left:none;
	cursor:pointer;
	background-color:#E73280;
	border-radius: 0;
	box-sizing: border-box;
}

.footer1 p{
	clear:both;
	text-align:left;
	color:#f5f5f5;
	font-family: 'Ubuntu', sans-serif;
	font-weight:100;
	font-size:0.9em;
	text-align:center;
	margin-top:10px;
}

.footer2 {
	margin:0 auto;
	width:100%;
	margin-bottom:20px;
	float:left;
	position:relative;
	z-index:1;
	overflow:hidden;
	text-align:center;
}

.footer2 h5{
	font-family: 'play', sans-serif;
	font-weight:100;
	font-size:1.9em;
	color:#fff;
	font-weight:bold;
	margin:0;
	padding-bottom:1vh;
	color:f5f5f5;
}	

.footer3 {
	width:100%;
	margin-bottom:20px;
	float:left;
	position:relative;
	z-index:1;
	overflow:hidden;
	text-align:center;
}

.footer3 a{
	text-align:left;
	float:none;
	padding-left:2%;
	padding-right:2%;
	line-height:1.5em;
	color:#f5f5f5;
	font-family: 'Ubuntu', sans-serif;
	font-weight:100;
	font-size:0.9em;
	text-decoration:none;
}

.footer3 a:hover{
	color:#ccc;
}
  • Вопрос задан
  • 736 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы