Safari 移动版 (iOS 10.2.1) 找不到 CSS link

Question

我正在使用 HTML、PHP Javscript 和 CSS 制作网站。我在同一文档中有 HTML、PHP 和 Javascript，在 CSS 文件中有 link。我现在正在检查与不同浏览器的兼容性，并注意到 iOS 10.2.1 中的 Safari 似乎找不到 CSS。这是为什么？

首先，我尝试从 <?php ?>（以及 PHP 代码之前的 Javascript 内部打印所有 HTML 代码。这适用于大多数浏览器，但至少有一个版本的 Firefox 在找到我的 CSS 文件的 link 时遇到了一些麻烦（CSS link 是从 PHP，但我在这个版本中没有 <html>、<head> 或 <body> 标签）。

在 PHP 代码的外部添加上述 HTML 标签后（并在 CSS link 中包含头），HTML 现在包围了 PHP 和 Javascript 代码（见下面的代码）。这解决了 Firefox 问题。但是 CSS 现在在 iOS 10.2.1 的 Safari 中不起作用（也许之前也没有，从未测试过）。

代码基本结构：

<!DOCTYPE html>
<html>
    <head>
        <title>Title<title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>

    <span class="menu_icon" onclick="openMenu()">&#9776;</span>
    <div class="menu" id="menuId">
        <a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">&times;</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>

Answer 1

您缺少标题元素的结束标记。添加 </title> 应该可以解决问题。

Answer 2

像这样尝试。 php代码可以在任何地方！

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>

    <span class="menu_icon" onclick="openMenu()">&#9776;</span>
    <div class="menu" id="menuId">
        <a href="javascript:void(0)" class="closebtn" onclick="closeMenu()">&times;</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>

Answer 3

我意识到 Javascript 应该在 body 内部或 HTML 的头部！显然适用于大多数浏览器，即使 Javascript 在 head 和 body 之外，但更改它解决了 Safari 移动版 iOS 10.2.1.

的问题

Safari 移动版 (iOS 10.2.1) 找不到 CSS link

Safari mobile (iOS 10.2.1) not finding CSS link

html

javascript

css

php

mobile-safari