Одна и та же страница дает разный визуальный вывод
У меня есть этот файл .html и такая форма, иногда растягивается во всю ширину. Протестировано с Opera, Firefox и Edge.
.html файл:
<!DOCTYPE html>
<head>
<title>LOGIN</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3-theme-teal.css">
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "assets/css/style.css">
<script src = "assets/js/index.js"></script>
</head>
<body>
<div class = "w3-container">
<h1>Login</h1>
<div class = "w3-card-4 form">
<form class = "w3-container" action = "/login" method = "post">
<label for = "username">Nome de utilizador</label>
<input class = "w3-input" type = "text" name = "username" placeholder = "Nome de utilizador" required id = "username">
<label for = "password">Password</label>1
<input class = "w3-input" type = "password" name = "password" placeholder = "Password" required id = "username">
<button class = "w3-button" type = "submit">Submit</button>
</form>
</div>
</div>
</body>
файл style.css:
.big {
background: rgb(150, 150, 150);
width: 100vw;
height: 40vw;
max-height: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.lightgray {
background-color:#c5c5c5!important;
}
.bordergray {
border-color:#6e6e6e!important;
}
.rightalign {
float: right !important;
}
.form {
width: 50vw;
/*margin-left: 2vw;*/
}
body {font-family: "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {
padding: 16px;
font-weight: bold;
}
Я могу сказать, что это ошибка CSS, но я не знаю, что или как правило может быть причиной этого.
Этот HTML был создан путем компиляции файла .pug, поэтому у меня нет его красивой версии, не стесняйтесь редактировать этот вопрос, если вы можете отформатировать HTML.
Обновлено:
Иногда я получаю IMG1, иногда IMG2, но только если я открываю новую вкладку, почему?
IMG1
IMG2:
(Я установил черный цвет фона, чтобы размер полей был более заметен)
@DonkeyShame Все ведут себя одинаково случайным образом
что assets/js/index.js делает?
@zgood Файл index.js ничего не делает на этой странице и может быть удален без каких-либо конфликтов, я уже протестировал его удаление и не влияет на эту конкретную страницу.
Итак, все браузеры отображают контент одинаково?
@DonkeyShame Да, они отображают содержимое случайным образом.
Не уверен, что смогу помочь, если вы не объясните, что означает для все браузеры отображать контент случайно. Что именно это означает?
Я тестировал в Edge, Chrome и Edge Canary; кроме некоторых особенностей пользовательского агента, похоже, что они отображаются одинаково для меня. Что такое случайная часть?
@DonkeyShame я обновил вопрос
Это на мобильном телефоне и его ширина установлена для портрета, а затем вы поворачиваете его в ландшафт? Просто догадайтесь по соотношению сторон ваших изображений.
Я протестировал предоставленный код в Firefox, Edge, Edge Canary и Chrome. Во всех случаях форма отображается на 50% ширины области просмотра. Я не знаю, как помочь.
Ответы 1
Танки всем за помощь, но дальнейшая отладка показывает мне, что файл style.css не импортировался, поэтому я изменил
<link rel = "stylesheet" href = "assets/css/style.css">
к
<link rel = "stylesheet" href = "/assets/css/style.css">
и работает все время, спасибо за всю помощь.
Какой браузер ведет себя иначе, чем другие?