Я пытаюсь запустить простую HTML-страницу с изображением и div.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
.container {
width: 240px;
height: 280px;
position: relative;
}
.tag {
position: absolute;
left: 10%;
bottom: 0px;
height: 220px;
width: 202px;
background-color: #4a8ab0;
border-radius: 6px;
color: #FFFFFF;
padding: 10px;
opacity: 0.9;
}
.sideHeader {
font-family: 'Quicksand', sans-serif;
font-size: 18px;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 11.5px;
letter-spacing: 0.01em;
}
</style>
</head>
<body>
<!---->
<div class="container">
<img src="D:/ata/images/cropped_box.jpg" style="height:210px;width:240px;">
<div class="tag"><div class="sideHeader"><b>Did you know</b></div>
<p>
With HTML you can create your own Website.This tutorial teaches you everything about HTML.HTML is easy to learn - You will enjoy it.
</p>
</div>
</div>
</body>
</html>
Я мог бы успешно запустить код в Google Chrome и Internet Explorer, где показано изображение и div.В то время как в Mozilla Firefox изображение не отображается.Это также не показывает ошибки.Я пытался использовать изображение в Интернете.Который показывает нормально.Почему Mozilla ведет себя иначе с локальными данными?Это проблема браузера?Я использую версию 66.0.2 (64-разрядная версия) Firefox.Как я могу исправить то же самое?Я попытался изменить обратную косую черту на переднюю.но это не работаетпожалуйста помоги.Заранее спасибо.