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

@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' и всё стало окей))) Спасибо)

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .

@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

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

Решение

Решение

Решение