我的网站在Firefox中的浏览器与Chrome浏览器不同

Question

我一直在研究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;
}

我该怎么做才能使它们相同？

Answer 1

亚像素定位很棘手。 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或grid代替浮动控件是个不错的选择，但是在CSS中将width属性更改为151px和755px可以解决此问题。

另外，请勿在多个元素上使用相同的id= ，这是无效的。

Answer 2

你不能 通常，在HTML中，它可以在不同的浏览器上显示不同。 Firefox在这方面不如Chrome先进。

我的网站在Firefox中的浏览器与Chrome浏览器不同

问题描述

2 个解决方案

解决方案1
3 已采纳 2019-01-31 18:07:40

解决方案2
-4 2019-01-31 17:54:48

我的网站在Firefox中的浏览器与Chrome浏览器不同

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-01-31 18:07:40

解决方案2 -4 2019-01-31 17:54:48

解决方案1
3 已采纳 2019-01-31 18:07:40

解决方案2
-4 2019-01-31 17:54:48