jquery - 网站在 Mac Safari、Firefox、Chrome 上预览效果很好，但在 PC 浏览器上只显示正文

Question

在测试期间，我遇到了网站在 PC 浏览器(包括 IE、Chrome 和 Firefox)中正常显示的问题。然而，它在 Safari、Firefox 和 Chrome 的 Mac 版本上测试良好。

具体而言，仅显示正文中的 x-repeat 背景图像。所有其他内容根本不显示。

http://www.spmguardians.org/2013/index.html

奇怪的是，IE 10 可以正确预览以下页面，但不能正确预览上面的页面引用:

http://www.spmguardians.org/2013/calendar/index.html

如有任何帮助，我们将不胜感激!

Answer 1

虽然页面加载对我来说很好(我使用的是 MacBook Pro 和 Safari)，但我发现您的代码中存在一些语法错误。

<meta name="viewport" content="width=device-width, user-scalable=yes"></meta>

您应该像这样关闭元标记:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

此外，

#explore DIV 下有几行...

    <div id="exploremenutop"> <a class="explore1" title="Guardian scores and schedules" a href="http://www.centralmassconference.org/g5-bin/client.cgi?G5genie=585">Guardian scores and schedules</a></div>
    <div id="exploremenutop"> <a class="explore2" title="Campus ministry, Grade 9 retreat" a href="PDFs/9th-Grade-Retreat-2017.pdf">Campus ministry, Grade 9 retreat</a></div>
    <div id="exploremenutop"> <a class="explore2" title="Parent Board News" a href="parentboard/index.html">Parent Board News</a></div>
    <div id="exploremenutop"> <a class="explore2" title="Alumni: Stay connected!" a href="alumninews/index.html">Alumni: Stay connected!</a></div>
    <div id="exploremenutop"> <a class="explore2" title="Student/Parent Handbook" a href="PDFs/Handbook2013-14.pdf">Student/Parent Handbook</a></div>
    <div id="exploremenutop"> <a class="explore2" title="College Contest for Juniors" a href="PDFs/CollegeVisitCompetition.pdf">College Contest for Juniors</a></div>

您指定了 a 两次……一次是在标签的开头(它所属的位置)，另一次是在 href 之前。删除每一行中 float 的额外 a。

另一个...这段代码:

      <!-- end #sidebar1 -->
  </span></div>

关闭 span 似乎没有关闭任何实际标签。我找不到与之匹配的开口跨度。

这些是我突然想到的错误……可能会有更多的语法错误，但仔细检查并修复这样的小错误应该有助于在更多浏览器中呈现。每个浏览器处理错误的方式不同 - 有些可以解决，有些会死掉，有些只会错误地显示您的页面，等等。