我的網站在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