Мой сайт выглядит по-другому в Firefox от Chrome - PullRequest
Новая
       2

Мой сайт выглядит по-другому в Firefox от Chrome

0 голосов
/ 31 января 2019

Я работал над веб-страницей в 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;
}

Что я могу сделать, чтобы сделать их одинаковыми?

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Субпиксельное позиционирование сложно.Единица cm не отображается на целое число пикселей (определяется как 1cm = 96px/2.54).

В Chrome: 

> getComputedStyle(document.querySelector('#shipBoard')).width
"755.891px"
> getComputedStyle(document.querySelector('#ship')).width
"151.172px"

В Firefox: 

> getComputedStyle(document.querySelector('#shipBoard')).width
"755.9px"
> getComputedStyle(document.querySelector('#ship')).width
"151.183px"

Значения в макете CSS часто конвертируются из двойных в плавающие и обратно или округляются до нескольких десятичных знаков.Это расположение хрупкое, потому что оно зависит от 5 * width (ship) ≤ width (shipBoard).Поплавки предназначены для упаковки при необходимости.Определенные длины в CSS, особенно границы, иногда привязываются к целому числу пикселей независимо от уровня масштабирования.

Flexbox или сетка были бы хорошим выбором вместо плавающих элементов, но изменяя свойства ширины на 151px и 755px в вашем CSS исправляет это.

Кроме того, не используйте один и тот же id= для нескольких элементов, это недопустимо.

0 голосов
/ 31 января 2019

Вы не можете.Обычно в HTML он может отображаться по-разному в разных браузерах.Firefox не настолько продвинут, как Chrome в этой области.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...