Потихоньку тренируюсь верстать. В общем, есть хедер и небольшое меню навигации, а нем проблемка, вот код: http://www.cssdesk.com/SQrh8
Всё лишнее я вырезал (вообще остальная вся страница готова и нормально смотрится, хочется разобраться тут).
Проблема: эта страница в последнем Хроме выглядит вообще отлично, а в старой Опере и последней Лисе у последней ссылки виден небольшой зазор в конце, который не закрашивается до конца при наведении. Хочется понять природу проблемы. Догадываюсь, что скорее всего проблема в тексте ссылок (шрифтах), точнее, их разном отображении браузерами. Можно ли что-то сделать, чтоб “дорисовать” недостающую полосу?
Остальное всё выглядит одинаково в трёх браузерах, только этот момент никак не удаётся.
П.С.: знаю, что наверняка перемудрил, но пока не доходит толком, как проще реализовать такую «красоту». До этого пытался сделать по-другому, через after и без спанов, и даже вместо рамок просто добавляя текстовую вертикальную черту; как результат — то же самое, что и сейчас: Хром показывает шик, остальные два бро тоже хорошо в целом, но полоска.
И да, в начале указан файл reset, результат одинаковый и с ним, и без него, так что проблема вроде не в нём.
На всякий случай содержимое файла сброса http://codepen.io/3gdata/pen/XJpdVw
Взято с Хабра
Я думаю, вам тут не стоит придумывать костыли какие-то.
Вам, по сути, надо добиться, чтобы ширина вашей большой закрашенной области, nav, была равная сумме ссылок внутри нее. Если сделать навигацию inline-block, то она автоматически встает по размеру вложенных элементов.
Но я бы сделал вообще по-другому. Я бы закрашивал не всю область, а сами ссылки, а при наведении менял цвет заднего фона с серого на синий. А задний фон у nav оставил прозрачным. Тогда у вас при наведении не будет ничего ниоткуда вылезать.
Как уже сказал @sergeytovarov, основаная проблема — сделать пунктам меню суммарную ширину ровно на всю ширину контейнера. Если задавать ширину фиксированными паддингами ссылок, то выходит очень негибко: если текст одного из пунктов станет шире, чем раньше, то меню развалится на две строки.
Поэтому можно попробовать более пуленепробиваемое решение: сделать ширину всех пунктов равной процентному отношению: ширина контейнера / количество пунктов, т.е. 100% / 6 = 16.66%.
Ещё один вариант — воспользоваться флексбоксами. В их спецификации есть свойство justify-content, которым можно равномерно распределить блоки по всей ширине контейнера (теоретические ссылки: вот и вот).
З.Ы. Не забудьте header nav::after спозиционировать абсолютно, а то делать отрицательные маргины для его позиционирования — это не есть хорошо. А так-то этот «блеск» меню — чисто декоративный элемент, пускай он не влияет на другие блоки в потоке.
я пробовал изначально этот вариант, но если переделать на такой подход, то тут проще все меню удалить и начать заново, потому что на span висит граница разделитель.
По сути тут вообще структура nav>a без всяких вложенностей. Граница и цвет фона падает на ссылку и при наведении просто меняется цвет фона. Так что, Алексей, мы советуем вам пересмотреть подход к организации меню.
Да, спаны избыточны.
Изначально я хотел сделать меню проще, как делается в курсах, но непонятно, как в этом случае добавить красивую полупрозрачную полосу сверху, если, конечно, не задавать её через position: absolute.
За ссылку про Flexbox спасибо, интересная вещь.
полоса то у вас идет к nav и не важно как она делается, а вот то что внутри nav - надо бы почистить)
Ясно, попробую задать меню, как обычно, через
<nav> <ul> шесть <li><a></a></li> </ul> </nav>
а полосу уже добавить после через абсолют.