Кроссбраузерная вёрстка, нужен совет

@mftmbqq · Регистрация: 29.05.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые.
Есть верхнее меню. В CSS прописано что при наведении мышью - меняются цвет текста и фоновый цвет каждого из блоков. Также выравнивание по вертикали сделано с помощью свойства flex.
Как сделать так, чтобы всё работало точь-в-точь также, только в Сафари (включая iPhone) и старых IE?

Адрес, по которому можно посмотреть живую менюшку: http://fleurdelys68.ru/1/me/
Кусок CSS кода, к которому надо что-то добавить:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.headermenublock{
    width:100px;
    height:70px;
    float:left;
    display:block;
}
.headermenublocktext{
    width:100px;
    height:70px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#0098d0;
}
.headermenublocktext a{
    width:100px;
    height:70px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#0098d0;
}
.headermenublocktext a:hover{
    width:100px;
    height:70px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color:#00aff0;
    color:#fff;
}

@Fedor92 · 17.12.2014, 17:27

mftmbqq, не добавить а изменить свойство display:flex - оно не поддерживается старыми браузерами... Пробуйте вместо flex - block или inline-block, как вариант...

@mftmbqq · 17.12.2014, 17:29 **[ТС]**

В Safari тоже нет flex?

@Fedor92 · 17.12.2014, 17:32

Сообщение от mftmbqq

В Safari тоже нет flex?

По моему с префиксом -webkit должно быть...

По моему оно...

@mftmbqq · 17.12.2014, 17:35 **[ТС]**

Я, по сути, и использую display:flex, чтобы выровнять текст по вертикали.
Есть ли какой-нибудь лаконичный и универсальный способ сделать это?
Как бы это сделали Вы?

@Fedor92 · 17.12.2014, 17:42

HTML5
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width:100px; height:100px; display:table; outline:1px solid red">
<a href="#" style="display:table-cell; vertical-align:middle; text-align:center">Пункт меню</a>
</div> 
</body>
</html>

Более лаконичного и кроссбраузерного, чем я представил выше я не знаю...

@mftmbqq · 17.12.2014, 18:02 **[ТС]**

Во.. классно, спасибо :-)
Окей, тогда ещё вопрос.. Подгружаю шрифт с помощью @font-face.. Во всех браузерах отображается нормально, а в осле опять по-своему.. Есть компромиссный вариант?

@Fedor92 · 17.12.2014, 18:06

Если шрифт кастомный думаю компромиссного варианта нет... Точнее есть, но для начала придётся покопаться в литературе... На форуме много вопросов уже было поводу подключения шрифтов есть много интересных тем, есть даже кое-какая литература... Примерно по 2-3 темы в месяц...

Если не найдёте ответа тогда обсудим...

@mftmbqq · 17.12.2014, 18:09 **[ТС]**

Окей, тогда последний вопрос в догонку..
А можно так сделать, чтобы инвалидов с раритетными браузерами перенаправляло на страницу, на которой написано, что, мол, так и так.. Придётся вам обновиться, иначе сайт вы не сможете созерцать))
?

@Fedor92 · 17.12.2014, 18:14

mftmbqq, Ну вот например... Такие вещи называют заглушками - а верстальщики костылями... Потому-что ставить заглушки для старых браузеров - это не совсем правильно... Обычно стараются верстать сайты даже под раритеты, но если Вы не хотите заморачиваться заглушек в сети полно...

@mftmbqq · 24.12.2014, 23:23 **[ТС]**

Решил вынести верхнее меню в отдельный php-файл и потом к каждой странице его подгружать.
Перенёс код всего верхнего меню в topmenu.php, подгрузил в index.php командой <? include 'topmenu.php' ?>.
Отображается нормально - однако, появился какой-то маленький отступ сверху (пикселей 10). Что не так?

Добавлено через 2 минуты
Вот адрес, если что: http://fleurdelys68.ru/1/me
Раньше блоки меню были впритык к верхней границе браузера

Добавлено через 30 минут
Всё, сам разобрался.. В кодировке дело было.. Преобразовал в Notepad++ все файлы из 'UTF-8' в 'UTF-8 без BOM' и всё стало окей))) Спасибо)

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

Кроссбраузерная вёрстка, нужен совет

Решение

Решение

Решение

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	17.12.2014, 17:27
	mftmbqq, не добавить а изменить свойство display:flex - оно не поддерживается старыми браузерами... Пробуйте вместо flex - block или inline-block, как вариант... 1

@mftmbqq 0 / 0 / 0 Регистрация: 29.05.2013 Сообщений: 28
	17.12.2014, 17:29 [ТС]
	В Safari тоже нет flex? 0

@mftmbqq 0 / 0 / 0 Регистрация: 29.05.2013 Сообщений: 28
	17.12.2014, 17:35 [ТС]
	Я, по сути, и использую display:flex, чтобы выровнять текст по вертикали. Есть ли какой-нибудь лаконичный и универсальный способ сделать это? Как бы это сделали Вы? 0

@mftmbqq 0 / 0 / 0 Регистрация: 29.05.2013 Сообщений: 28
	17.12.2014, 18:02 [ТС]
	Во.. классно, спасибо :-) Окей, тогда ещё вопрос.. Подгружаю шрифт с помощью @font-face.. Во всех браузерах отображается нормально, а в осле опять по-своему.. Есть компромиссный вариант? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	17.12.2014, 18:06
	Если шрифт кастомный думаю компромиссного варианта нет... Точнее есть, но для начала придётся покопаться в литературе... На форуме много вопросов уже было поводу подключения шрифтов есть много интересных тем, есть даже кое-какая литература... Примерно по 2-3 темы в месяц... Если не найдёте ответа тогда обсудим... 1

@mftmbqq 0 / 0 / 0 Регистрация: 29.05.2013 Сообщений: 28
	17.12.2014, 18:09 [ТС]
	Окей, тогда последний вопрос в догонку.. А можно так сделать, чтобы инвалидов с раритетными браузерами перенаправляло на страницу, на которой написано, что, мол, так и так.. Придётся вам обновиться, иначе сайт вы не сможете созерцать)) ? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	17.12.2014, 18:14
	Сообщение было отмечено mftmbqq как решение Решение mftmbqq, Ну вот например... Такие вещи называют заглушками - а верстальщики костылями... Потому-что ставить заглушки для старых браузеров - это не совсем правильно... Обычно стараются верстать сайты даже под раритеты, но если Вы не хотите заморачиваться заглушек в сети полно... 1

@mftmbqq 0 / 0 / 0 Регистрация: 29.05.2013 Сообщений: 28
	24.12.2014, 23:23 [ТС]
	Решил вынести верхнее меню в отдельный php-файл и потом к каждой странице его подгружать. Перенёс код всего верхнего меню в topmenu.php, подгрузил в index.php командой <? include 'topmenu.php' ?>. Отображается нормально - однако, появился какой-то маленький отступ сверху (пикселей 10). Что не так? Добавлено через 2 минуты Вот адрес, если что: http://fleurdelys68.ru/1/me Раньше блоки меню были впритык к верхней границе браузера Добавлено через 30 минут Всё, сам разобрался.. В кодировке дело было.. Преобразовал в Notepad++ все файлы из 'UTF-8' в 'UTF-8 без BOM' и всё стало окей))) Спасибо) 0