Мой сайт в Firefox выглядит иначе, чем в Chrome
Я работал над веб-страницей в Chrome и понял, что в Firefox она выглядит иначе. Я упростил свой код, чтобы показать проблему. Кажется, что последний не отображается в Firefox, хотя он виден в Chrome.
Вот мой html-файл.
<!DOCTYPE html>
<html>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "style.css">
<div id=shipBoard align = "right" style = "overflow: hidden">
<div id = "ship" style = "float: left;">
<img src = "carrier.jpg" style = "width:100px;height:100px;">
</div>
<div id = "ship" style = "float: left;">
<img src = "destroyer.jpg" style = "width:100px;height:100px;">
</div>
<div id = "ship" style = "float: left;">
<img src = "test.jpg" style = "width:100px;height:100px;">
</div>
<div id = "ship" style = "float: left;">
<img src = "battleship.jpg" style = "width:100px;height:100px;">
</div>
<div id = "ship" style = "float: left;">
<img src = "sub.jpg" style = "width:100px;height:100px;">
</div>
</div>
</html>
И вот файл css:
#ship {
position: relative;
width: 4cm;
height: 5cm;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#shipBoard {
position: relative;
width: 20cm;
height: 5cm;
margin-left: auto;
margin-right: auto;
background-color: green;
}
Что я могу сделать, чтобы они были одинаковыми?
@ceejayoz Эти теги необязательны.
Я бы начал с просмотра сброса или нормализации CSS (спросите у Google). Эти фрагменты CSS пытаются выровнять основу, чтобы каждый браузер действовал примерно одинаково для всех элементов. Кроме того, использование реальных измерений, таких как cm, может привести к различиям между устройствами/браузерами. Вместо этого вы должны использовать единицы на основе экрана, такие как px, или, что еще лучше, относительные единицы, такие как % em rem vw/vh.
@JoshLee Валидатор HTML5 W3C говорит, что «в элементе head отсутствует требуемый экземпляр дочернего элемента title» для этого HTML.
Также было бы полезно, если бы вы могли опубликовать скриншоты различий, которые вы видите.
@ceejayoz Да, элемент заглавие обязателен.
@JoshLee, то есть у них недействительный документ HTML5. Учитывая, что у OP есть проблемы с рендерингом в браузере, явное объявление того, что такое head/body, является полезным первым шагом для уменьшения различий в браузерах.
@ceejayoz Элементы meta и link находятся в голове, а div — в теле. Ни один браузер не ошибается, и это даже не ошибка проверки, а просто распространенное заблуждение.
Ответы 2
Вы не можете. Обычно в HTML он может отображаться по-разному в разных браузерах. Firefox не так продвинут, как Chrome в этой области.
Это просто неверно.
Это не совсем так. В большинстве случаев и приложив определенные усилия, почти все браузеры можно сделать одинаковыми. Это дурацкая затея, но это можно сделать. Тем не менее, хорошо написанные HTML и CSS должны выглядеть одинаково во всех браузерах класса A, включая Firefox, Safari и Edge в дополнение к Chrome.
Я прошу прощения. Насколько я понял, так оно и работало.
Позиционирование субпикселей сложно. Блок cm не соответствует целому числу пикселей (он определяется как 1cm = 96px/2.54).
В Хроме:
> getComputedStyle(document.querySelector('#shipBoard')).width
"755.891px"
> getComputedStyle(document.querySelector('#ship')).width
"151.172px"
В Фаерфоксе:
> getComputedStyle(document.querySelector('#shipBoard')).width
"755.9px"
> getComputedStyle(document.querySelector('#ship')).width
"151.183px"
Значения в макете CSS часто преобразуются из двойных в числа с плавающей запятой и обратно или округляются до нескольких знаков после запятой. Этот макет хрупкий, потому что он зависит от 5 * ширина (корабль) ≤ ширина (корабль). Поплавки предназначены для обертывания при необходимости. Некоторые длины в CSS, особенно границы, иногда привязываются к целому числу пикселей независимо от уровня масштабирования.
Flexbox или сетка были бы хорошим выбором вместо float, но изменение свойств ширины на 151px и 755px в вашем CSS исправляет это.
Кроме того, не используйте один и тот же id= для нескольких элементов, это недопустимо.
Вы должны начать с наличия действительного HTML-файла с
<head>и<body>.