Question

我正在做一个家庭作业的网站，而且我在渲染图像方面遇到了麻烦。它看起来与Chrome和Edge浏览器一样，但在Firefox上它看起来已经取代了。

这是Chrome / Edge上的页面：Chrome/Edge Image

这是Firefox上同一页面的屏幕截图：Firefox image

我似乎无法理解他们为何与众不同？

＆＃13;

/* 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 % ;
}

＆＃13;

<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>

＆＃13;

Answer 1

我在这里找到了这个问题！

问题在于您错过了HTML代码的<!DOCTYPE>声明。

声明必须是HTML文档中标记之前的第一件事。声明不是HTML标记;它是Web浏览器关于页面编写的HTML版本的指令。

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

<!DOCTYPE html>

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

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

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

1 个答案: