0

我已经使用 Ocopress 重新构建了我的网站。我发现它非常适合构建静态站点！

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

此外 - “导航”下拉菜单有“未定义”条目。

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

请参阅我附上的图片 - 我的带有 IE8 的 Octopress 网站。[1]

与我的 Octopress 网站在 Firefox 中的外观相比（看起来不错！）：[2]

将其与我的 Octopress 网站在 Google Chrome 中的外观进行比较（也不错！）

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

  2. 火狐（好）： http ://www.flickr.com/photos/meorero/8656722709/

4

2 回答 2

1

正如我在 octopress 网站上发现的那样，在 <= ie8 中存在一些问题。

（我在 2013 年 3 月 11 日使用从主分支克隆的 Octopress v2.0）

  • 该网站使用 html5 标签
  • 升级到 Modernizr 2.6 删除了 respond.js，这意味着该站点始终看起来像移动版本
  • 并且导航下拉标签在任何 ie 版本中都不起作用

因此，以下内容在我的网站上为我工作：

  1. 添加

    <!--[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>

  2. 获取respond.min.js文件

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

    并将其放入source/javascripts/libs

这应该解决 <= ie8 的样式和媒体查询问题

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

    如下所示source/javascripts/octopress.js对 getNav() 进行更改，替换link.text为$(link).text()IE 使用 innerText 而不是链接上的文本属性。

    这是更改集差异：

    @@ -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; }

octopress 问题跟踪暂时在 github 上关闭，因此部分或全部这些问题有望在下一个版本中得到修复。

于 2013-05-02T09:30:39.857 回答
0

这是我所做的 - 这似乎适用于桌面浏览器 -包括 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>
于 2013-04-17T19:59:23.040 回答