Question

我使用Ocopress重新构建了我的网站。我发现建立静态网站真的很棒！

但现在的问题是 - 当我尝试在Internet Explorer 8中看到它时 - 它有一个“移动”外观！我的意思是 - IE8被认为是移动< / strong>即可。事实并非如此。至少不适合我...

此外 - “导航”下拉列表中包含“未定义”条目。

我不时在我的PC上使用IE8（尽管我更喜欢Firefox和Chrome / Chromium）。

查看我附加的图片 - 我的Octopress网站与IE8。 [1]

比较我的Octopress网站在Firefox中的样子（看起来不错！）：[2]

将其与我的Octopress网站在Google Chrome中的外观相比（也很好！）

我在IE8上的网站（不好）：
http://www.flickr.com/photos/meorero/8657827234/

Firefox（不错）： http://www.flickr.com/photos/meorero/8656722709/

Answer 1

我在octopress网站上找到的＆lt; = ie8中有一些问题。

（我在2013年3月11日从主分支机构克隆了Octopress v2.0）

该网站使用html5标签
升级到Modernizr 2.6会降低respond.js，这意味着该网站总是看起来像移动版
并且导航下拉标签不适用于任何版本

所以，以下在我的网站上为我工作：

添加

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="{{ root_url }}/javascripts/libs/respond.min.js"></script>
<![endif]-->

在source/_includes/head.html代码

到</head>

获取respond.min.js文件

git clone https://github.com/scottjehl/Respond.git

并将其放入source/javascripts/libs

这应修复＆lt; = ie8

要修复导航下拉菜单，需要修复octopress.js中link.text属性的使用。我克隆的octopress的版本包括jquery所以：

source/javascripts/octopress.js中的

对getNav（）进行了更改，如下所示，将link.text替换为$(link).text()，因为IE在链接上使用innerText而不是text属性。

继承变更集差异：

@@ -3,10 +3,10 @@
   mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
   $('ul[role=main-navigation]').addClass('main-navigation');
   $('ul.main-navigation a').each(function(i, link) {
-    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
+    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+$(link).text()+'</option>');
   });
   $('ul.subscription a').each(function(i, link) {
-    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
+    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+$(link).text()+'</option>');
   });
   mobileNav.children('select').bind('change', function(event) {
     if (event.target.value) { window.location.href = event.target.value; }

ocithress问题跟踪暂时在github上关闭，因此有些或所有这些事情有望在下一个版本中修复。

Answer 2

这就是我所做的 - 这似乎适用于桌面浏览器 - 包括IE8 !!：

在./source/_includes/head.html

删除了这个：

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en">
<!--<![endif]-->
<head>

并说出来：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>

Octopress - 在IE8中呈现为移动设备，“导航”具有“未定义”。怎么解决？

2 个答案: