#html #css #layout
Вопрос:
Учитывая эту HTML-страницу:
<html>
<body>before<button style="height: 100px"></button>after</body>
</html>
Макет страницы сильно отличается в Chrome и Firefox. Вот Firefox:
Вот Хром:
В Chrome кнопка, похоже, следует vertical-align: baseline за ней . Но в Firefox, похоже , это следует vertical-align: middle или что-то в этом роде.
В чем причина такой разницы в компоновке? И какой браузер прав в отношении спецификаций CSS?
Комментарии:
1. оба следуют базовой линии, но Firefox вычисляет базовую линию по-разному. добавьте одну букву внутри кнопки, чтобы увидеть, что Firefox рассматривает такую базовую линию. IMO Chrome здесь правильный, но кнопки всегда странные, поэтому я не удивлен таким поведением
2. Согласен с Темани, но даже поведение Chrome не кажется правильным. Если кнопка содержит один пустой элемент блока, этого должно быть недостаточно для перемещения базовой линии, но в Chrome она перемещает ее в середину, чтобы соответствовать Firefox. В любом случае кнопка без содержимого-действительно плохая идея, которую вам не следует делать, поэтому на практике это не имеет большого значения.
Ответ №1:
Насколько я понимаю, каждый браузер обрабатывает предопределенные стили HTML по-разному. На самом деле для браузеров не существует «правильного» способа решения этих задач, поскольку технически они сами решают, как они хотели бы определять стили.
В обоих браузерах, казалось, это vertical-align: bottom работало одинаково. Если бы это было вашей намеченной целью, возможно, стоило бы подумать об этом. Я также нашел сообщение о том, что вы можете включить этот CSS-файл, так что, возможно, стоит попробовать. Надеюсь, это немного поможет!