Chrome/Edge和Firefox中的不同图像渲染

我正在做一个作业网站，并且在渲染图像时遇到问题。它看起来像在Chrome和Edge浏览器上预期的一样，但在Firefox上它看起来很流行。Chrome/Edge和Firefox中的不同图像渲染

这是在Chrome /边缘的页面：Chrome/Edge Image

而且这是在同一页上的Firefox截图：Firefox image

我似乎无法理解为什么他们有什么不同？

/* STRUTTURA BASE PER TUTTI GLI HTML */ 
 
@import url('https://fonts.googleapis.com/css?family=Advent Pro'); 
 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    font - size: 10 px; 
 
    background - color: #ABCDEF; 
 
} 
 

 
body { 
 
    font - family: 'Advent Pro'; 
 
} 
 

 
div.all { 
 
    position: relative; 
 
    width: 70 % ; 
 
    min - width: 800 px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/* CAMERA.html */ 
 

 
div.immDx { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin - top: 6 % ; 
 
    font - size: 170 % ; 
 
} 
 

 
img.imgDx { 
 
    position: relative; 
 
    overflow: visible; 
 
    float: right; 
 
    height: 60 % ; 
 

 
} 
 

 
span.nameDx { 
 
    position: relative; 
 
    margin - left: 20 % ; 
 
} 
 

 
span.descDx { 
 
    position: relative; 
 
    margin - left: 20 % ; 
 
    text - decoration: underline; 
 
} 
 

 
span.listaDx { 
 
    position: relative; 
 
    margin - left: 40 % ; 
 
}

<html> 
 
    <body> 
 
     <meta charset="utf-8"> 
 
     <title> QM-D_2_CAMERA </title> 
 
     <link href="https://fonts.googleapis.com/css?family=Advent Pro"/> 
 
     <link rel="stylesheet" href="mystyle.css"> 
 
     <div class="all"> 
 
      <div class="immDx"> 
 
       <img src="http://i.imgur.com/YZe0gad.jpg" class="imgDx"/> 
 
       <span class="nameDx"> HEMNES no. 202.004.56 </span> <BR/> <BR/> 
 
       <span class="descDx"> DESCRIZIONE DEL PRODOTTO</span> <BR/> <BR/> 
 
       <span class="nameDx"> Parti principali/ Ripiano: </span><BR/> 
 
       <span class="listaDx"> Pino massiccio</span><BR/> 
 
       <span class="listaDx"> Mordente</span><BR/> 
 
       <span class="listaDx"> Vernice acrilica trasparente</span><BR/> 
 
       <span class="nameDx"> Lati del cassetto/Parte posteriore: </span><BR/> 
 
       <span class="listaDx"> Pino massiccio</span><BR/> 
 
       <span class="nameDx"> Base del cassetto: </span><BR/> 
 
       <span class="listaDx">Fibra di legno</span><BR/> 
 
       <span class="listaDx">Lamina</span><BR/> 
 
       <span class="descDx"> MISURE DEL PRODOTTO</span> <BR/> <BR/> 
 
       <span class="nameDx"> Larghezza: 46 cm </span><BR/> 
 
       <span class="nameDx"> Profondità: 35 cm </span><BR/> 
 
       <span class="nameDx"> Altezza: 70 cm </span><BR/> 
 
       <span class="nameDx"> Profondità cassetto (interna): 23 cm </span><BR/> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

来源

2017-07-08 Gabriele Zanatta

我无法在Chrome或Firefox中重现您的问题，因此必须进行更多操作，而不是显示您的标记。 – Rob

我更新了代码，文字在Chrome中并不完美，但是现在您可以看到图片问题 –

我仍然没有看到任何区别。 – Rob

，我发现这里的问题！

问题是您遗漏了HTML代码的<!DOCTYPE>声明。

声明必须是标记之前HTML文档中的第一件事。该声明不是HTML标记;它是什么版本的HTML的网页上写的是Web浏览器的指令

在你的情况，你应该使用HTML5的声明是：

<!DOCTYPE html>

在添加它文件的开头应该解决这个烦人的问题。

有趣的是，Stackoverflow的代码片段功能默认添加了它，这就是为什么有些用户没有注意到Chrome和Firefox中的不同渲染！

来源

2017-07-09 08:30:03

现在图像不会调整大小，当我改变CSS上的高度。你现在为什么？ –

@GabrieleZanatta你必须在你的css中添加： 'width：100％;高度：100％;''到body'， '高度：100％;''到div.all' 和'高度：100％;''到div.immDx' –

Chrome/Edge和Firefox中的不同图像渲染

回答

相关问题