javascript — Safari mobile (iOS 10.2.1) не находит ссылку CSS
Я делаю сайт с HTML, PHP Javscript и CSS. У меня есть HTML, PHP и Javascript в одном документе и ссылка на файл CSS. Сейчас я проверяю совместимость с различными браузерами и заметил, что Safari в iOS 10.2.1, похоже, не находит CSS. Почему это?
Сначала я попытался распечатать весь HTML-код изнутри <?php ?> (и Javascript перед кодом PHP). Это работало в большинстве браузеров, но по крайней мере в одной версии Firefox возникли проблемы с поиском ссылки на мой файл CSS (ссылка CSS была напечатана из PHP, но у меня не было <html>, <head> или же <body> теги в этой версии).
После добавления вышеупомянутых тегов HTML вне кода PHP (включая ссылку CSS в заголовке), теперь HTML окружает код PHP и Javascript (см. код ниже). Это решило проблему Firefox. Но теперь CSS не работает в Safari в iOS 10.2.1 (возможно, раньше тоже не работал, никогда не тестировал).
Базовая структура кода:
<!DOCTYPE html>
<html>
<head>
<title>Title<title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="menu_icon" onclick="openMenu()">☰</span>
<div class="menu" id="menuId">
<a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">×</a><br>
<a href="subtests.php?t=7&q=0">Subtest 7</a><br>
<a href="subtests.php?t=8&q=0">Subtest 8</a>
</div>
</body>
<script>
function openMenu() {
document.getElementById("menuId").style.width = "200px";
}
function closeMenu() {
document.getElementById("menuId").style.width = "0";
}
function onImageClick(index) {
document.getElementById("submit_button").style.display = "block";
document.getElementById("image"+index).style.border = "solid black";
}
</script>
<?php
//PHP code that sends info to database etc, this code works
?>
</html>
Решение
Вам не хватает конечного тега для вашего элемента заголовка. Добавление </title> должен решить проблему.
Другие решения
Попробуйте это так. PHP-код может быть где угодно!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="menu_icon" onclick="openMenu()">☰</span>
<div class="menu" id="menuId">
<a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">×</a><br>
<a href="subtests.php?t=7&q=0">Subtest 7</a><br>
<a href="subtests.php?t=8&q=0">Subtest 8</a>
</div>
</body>
<script type="text/javascript">
function openMenu() {
document.getElementById("menuId").style.width = "200px";
}
function closeMenu() {
document.getElementById("menuId").style.width = "0";
}
function onImageClick(index) {
document.getElementById("submit_button").style.display = "block";
document.getElementById("image"+index).style.border = "solid black";
}
</script>
<?php
//PHP code that sends info to database etc, this code works
echo "Test for see where will appear this text";
?>
</html>
Я понял, что Javascript должен быть внутри тела или заголовка HTML! Очевидно, работал для большинства браузеров даже с Javascript вне головы и тела, но его изменение решило проблему для Safari iOS 10.2.1.