1
У меня есть экран проверки, на котором перекладина верхняя панель для каждого шага процесса. Ниже рендер в Safari (9.1.2 для Mac OSX):UL с встроенным блоком LIs получает неправильную высоту в Chrome, Firefox
Синяя полоска является элементом UL, и каждый шаг в процессе покупки является LI. LI являются inline-block, так что UL может иметь text-align: center в центре этих LI.
А вот сделать в Chrome (52 Mac OS X):
Чтобы исправить это, я поставил UL line-height: 0, а затем внутренние Lis line-height: 1.5. Я знаю, что это работает, но я хотел бы знать, почему и если решение может создать больше проблем в будущем.
Кому-нибудь еще пришлось иметь дело с этой проблемой?
Можете ли вы дать нам образец скрипки, чтобы продемонстрировать проблему? Благодаря! – kukkuz
Я, кажется, сузил его до «переполнения: скрытый», который мне нужен в элементах LI (чтобы обработать треугольник, нарисованный псевдоэлементом) https://jsfiddle.net/highchair/x1znsy1x/ –
Я вижу, как ответ на отмеченный дублированный вопрос может применяться здесь. Добавление чего-либо, кроме свойства 'vertical-align: baseline' по умолчанию, также устраняет эту проблему в Chrome. Тем не менее, я хотел бы отметить, что свойство 'overflow: hidden' также должно играть здесь роль, поскольку оно, похоже, вызывает какое-то ясное исправление. Если я оставлю «vertical-align: baseline», но перейду на «видимый», UL рухнет в Chrome, как и ожидалось. –