Fatal编程技术网
  • html/
  • Html 我的网站在Firefox和Chrome中看起来不同

Html 我的网站在Firefox和Chrome中看起来不同

html css google-chrome firefox

Html 我的网站在Firefox和Chrome中看起来不同,html,css,google-chrome,firefox,Html,Css,Google Chrome,Firefox,我在Chrome上做了一个网页，发现它在Firefox上看起来不一样。我简化了代码以显示问题。最后一个在Firefox中似乎没有显示，而在Chrome中却可以看到 这是我的html文件 <!DOCTYPE html> <html> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id=shipBoar

我在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>
我该怎么做才能使它们相同呢？

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

亚像素定位很棘手。厘米单位不映射到整数像素，它被定义为1cm=96px/2.54

镀铬：

> 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*的宽度≤ 船上的。浮子设计为在必要时包裹。CSS中的某些长度，特别是边框，偶尔会捕捉到整数像素，而不管缩放级别如何

Flexbox或grid将是一个很好的选择，而不是浮动，但是在CSS中将宽度属性更改为151px和755px可以解决这个问题

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

您应该先创建一个有效的HTML文件，其中包含a和。@ceejayoz这些标记是可选的。我会先查看CSS重置或规范化Ask Google。这些CSS片段试图对基础进行分级，以便每个浏览器对所有元素的作用大致相同。此外，使用真实世界的度量（如cm）可能会导致设备/浏览器之间的差异。相反，您应该使用基于屏幕的单位，如px或更好的相对单位，如%em-rem-vw/vh@JoshLeeW3C的HTML5验证程序说，元素头缺少此HTML所需的子元素标题实例。如果您可以发布所看到差异的屏幕截图，也会有所帮助。这完全是错误的。这不是真的。在大多数情况下，通过努力，您可以使几乎所有浏览器看起来完全相同。这是一件愚蠢的差事，但它是可以做到的。也就是说，编写良好的HTML和CSS在A级浏览器中应该非常相似，除了Chrome之外，还包括Firefox、Safari和Edge。我很抱歉。据我所知，这就是它的工作原理。 
> getComputedStyle(document.querySelector('#shipBoard')).width
"755.9px"
> getComputedStyle(document.querySelector('#ship')).width
"151.183px"