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中的不同圖像渲染

回答

相關問題