0

Ocopress を使用して Web サイトを再構築しました。静的サイトの構築には本当に素晴らしいと思いました!

しかし、現在の問題は、Internet Explorer 8 で表示しようとすると、「モバイル」のように見えることです。つまり、IE8 はモバイルであると考えられています。そして、そうではありません。少なくとも私にとっては...

さらに、「ナビゲート」ドロップダウンには「未定義」のエントリがあります。

仕事用の PC で時々 IE8 を使用します (Firefox と Chrome / Chromium の方が好きですが)。

添付している画像を参照してください-IE8を使用した私のOctopressサイト。[1]

私の Octopress サイトが Firefox でどのように見えるかを比較してください (よさそうです!): [2]

私の Octopress サイトが Google Chrome でどのように表示されるかを比較してください (こちらも良いです!)

  1. IE8 の私のサイト (良くない):
    http://www.flickr.com/photos/meorero/8657827234/

  2. Firefox (良い): http://www.flickr.com/photos/meorero/8656722709/

4

2 に答える 2

1

octopress サイトで見つけたように、ここ <= ie8 でいくつかの問題が発生しています。

(2013 年 3 月 11 日に master ブランチから複製された 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.jsgetNav() を変更します。IEはリンクのテキスト属性ではなく innerText を使用するため、 に置き換えます。link.text$(link).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; }

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 に答える