Проблема с позиционирование и font-family: sans-serif на iOS

k0sm0s · July 6, 2014

Пытаюсь разместить заголовок по центру страницы. Приведенный ниже код отлично работает во всех браузерах, кроме iPhone. Но самое парадоксальное, что если поменять font-family: times; то заработает и на iPhone.

<html><head>	<style>		html {			font-family: sans-serif;		}		header, .mainHeader {			width: 100%;			height: 100%;		}		.mainHeader {			position: fixed;			z-index: 100%;		}		.wrapper { 		    height: 100%; 		    max-width: 100%; 		    margin: 0 auto; 		} 		.wrapper:before, .containerToCenter { 		    display: inline-block; 		    vertical-align: middle; 		} 		.containerToCenter {		    width: 100%;		}		.wrapper:before { 		    content: ''; 		    display: inline-block; 		    width: 0; 		    height: 100%; 		    vertical-align: middle; 		   	;		}  		h1 {			width: 100%;			text-align: center;			z-index: 2;		}		nav {	        width: 100%;	        height: 100%;	        background-color: green;	    }	</style></head><body>	<header>        <div class="mainHeader">			<div class="wrapper"> 			  <!-- element to center --> 			  <div class="containerToCenter"> 			    <h1>Hello World</h1> 			  </div> 			</div> 		</div>		<nav>			test!!!                    </nav>	</header></body></html>

Подскажите в чем может быть дело. Теряюсь в догадках.

Вадим Некрасов · July 6, 2014

Если font-family: times; работает, а font-family: sans-serif; нет, то скорей всего Iphone не поддерживает шрифт sans-serif;

Попробуй

font-family: arial, verdana, sans-serif;

или

font-family: arial, verdana, times;

k0sm0s · July 6, 2014

Если font-family: times; работает, а font-family: sans-serif; нет, то скорей всего Iphone не поддерживает шрифт sans-serif;

Думаю проблема чуть глубже, поскольку не отображается, а вернее я подозреваю не правильно позиционируется только h1. Текст внутри nav отлично отображается в нужным шрифтом. Такая же ситуация наблюдается если использовать гугловский Open Sans.

Вадим Некрасов · July 6, 2014

Приведенный ниже код отлично работает во всех браузерах

А вот у меня не работает, текст не посередине. Или его вообще нет

Если font-family: times; работает, а font-family: sans-serif; нет, то скорей всего Iphone не поддерживает шрифт sans-serif;

Думаю проблема чуть глубже, поскольку не отображается, а вернее я подозреваю не правильно позиционируется только h1. Текст внутри nav отлично отображается в нужным шрифтом. Такая же ситуация наблюдается если использовать гугловский Open Sans.

<html>

<head>

<style>

html {

font-family: sans-serif;

}

header, .mainHeader {

width: 100%;

height: 100%;

}

.mainHeader {

position: fixed;

z-index: 100%;

}

.wrapper {

height: 45%;

max-width: 45%;

margin: 0 auto;

}

.wrapper:before, .containerToCenter {

display: inline-block;

vertical-align: middle;

}

.containerToCenter {

width: 100%;

}

.wrapper:before {

content: '';

display: inline-block;

width: 0;

height: 100%;

vertical-align: middle;

;

}

h1 {

width: 100%;

text-align: center;

z-index: 2;

}

nav {

width: 100%;

height: 100%;

background-color: green;

}

</style>

</head>

<body>

<h1>Hello World</h1>

</div>

<nav>

test!!!

</nav>

</header>

</body>

</html>

Попробуй этот код

И еще, если ты хочешь зеленый фон, то напиши в тег html так:

background: green;

И удали nav, если только для фона

Ты еще задал ширину и высоту для блочных элементов по 100% и они, как я понял выталкивают друг друга.

Edited July 6, 2014 by Вадим Некрасов

k0sm0s · July 6, 2014

1. В каком браузере у тебя не работает приведенный мной оригинальный код?

2. Что ты поменял относительно оригинального кода?

3. Не понимаю какое отношение способ задачи цвета элемента nav имеет к сути проблемы.

4. nav там нужен, потому, что тест сделан на основе кода реальной страницы, где внутри nav реализовано меню, поверх которого отображается надпись.

Вадим Некрасов · July 6, 2014

1. В каком браузере у тебя не работает приведенный мной оригинальный код?
2. Что ты поменял относительно оригинального кода?
3. Не понимаю какое отношение способ задачи цвета элемента nav имеет к сути проблемы.
4. nav там нужен, потому, что тест сделан на основе кода реальной страницы, где внутри nav реализовано меню, поверх которого отображается надпись.

1. В Goggle

2. Изменил .wrapper {

height: 100%;

max-width: 100%;

margin: 0 auto;

На

.wrapper {

height: 45%;

max-width: 45%;

margin: 0 auto;

3. Я имел в виду фон страницы а не nav

Меню с шириной 100% и высотой 100%?

k0sm0s · July 6, 2014

1. В хроме у меня работает мой вариант (первоначальный) это подтверждает не только собственно мой браузер, но и сервисы для тестирования, он и в эмуляторе iPhone работает.

2. Да, меню с шириной и высотой 100%.

3. Мне не нужен фон страницы, у меню есть куча своих фонов, для их эмуляции и используется цвет элемента nav.

4. Предложенный тобой вариант не работает в Google Chrome и тем более на iPhone.

Вадим Некрасов · July 6, 2014

1. В хроме у меня работает мой вариант (первоначальный) это подтверждает не только собственно мой браузер, но и сервисы для тестирования, он и в эмуляторе iPhone работает.
2. Да, меню с шириной и высотой 100%.
3. Мне не нужен фон страницы, у меню есть куча своих фонов, для их эмуляции и используется цвет элемента nav.
4. Предложенный тобой вариант не работает в Google Chrome и тем более на iPhone.

Странно

k0sm0s · July 6, 2014

1. В хроме у меня работает мой вариант (первоначальный) это подтверждает не только собственно мой браузер, но и сервисы для тестирования, он и в эмуляторе iPhone работает.
2. Да, меню с шириной и высотой 100%.
3. Мне не нужен фон страницы, у меню есть куча своих фонов, для их эмуляции и используется цвет элемента nav.
4. Предложенный тобой вариант не работает в Google Chrome и тем более на iPhone.
Странно

А что странного, ты проверял свой код то браузере? Если хочешь можешь залит в сеть свой вариант, я пришлю тебе скриншот.

Вадим Некрасов · July 6, 2014

1. В хроме у меня работает мой вариант (первоначальный) это подтверждает не только собственно мой браузер, но и сервисы для тестирования, он и в эмуляторе iPhone работает.
2. Да, меню с шириной и высотой 100%.
3. Мне не нужен фон страницы, у меню есть куча своих фонов, для их эмуляции и используется цвет элемента nav.
4. Предложенный тобой вариант не работает в Google Chrome и тем более на iPhone.
Странно

А что странного, ты проверял свой код то браузере? Если хочешь можешь залит в сеть свой вариант, я пришлю тебе скриншот.

Вот http://pravilo-russkogo.esy.es/uchebnik.php

Sign In

Проблема с позиционирование и font-family: sans-serif на iOS

Question

k0sm0s

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Вадим Некрасов

Link to comment

Share on other sites

k0sm0s

Link to comment

Share on other sites

Вадим Некрасов

Link to comment

Share on other sites

k0sm0s

Link to comment

Share on other sites

Вадим Некрасов

Link to comment

Share on other sites

k0sm0s

Link to comment

Share on other sites

Вадим Некрасов

Link to comment

Share on other sites

k0sm0s

Link to comment

Share on other sites

Вадим Некрасов

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information