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

Question

我正在做一个网站的作业，但在渲染图像时遇到了问题。它在 Chrome 和 Edge 浏览器上看起来符合预期，但在 Firefox 上它看起来错位了。

这是 Chrome/Edge 上的页面：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>

Answer 1

我在这里发现了问题！

问题是您缺少 HTML 代码的 <!DOCTYPE> 声明。

The declaration must be the very first thing in your HTML document, before the tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

在您的情况下，您应该使用 HTML5 声明，即：

<!DOCTYPE html>

将它添加到文档的开头应该可以解决这个烦人的问题。

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

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

Different image rendering in Chrome/Edge and Firefox

html

css

doctype