20080226_IE_logo

IEの印刷プレビューについて

現在仕事で制作中のサイト。2年前に制作したサイトを部分的にリニューアルしています。
自分のサイトにテストでアップしてクライアントさんに確認してもらっています。

1つ指摘された事があります。
IEでの、下記のページの印刷プレビューが出来ないそうです。他のページは問題ありません。ちなみにクライアントさんはwindows7です。
http://nobu-69.com/test_site/nolimits201304/nyukaigo.html

僕も確認してみました.
windows xp でモードをie7にするとプレビューが出来ません。
windows7 でモードをie7にするとプレビューが出来ません。
その他(ie8,ie9)は問題ありません。どうやらie7で見た時だけ印刷プレビューが出来なくなるようです。

原因の検討がつきません。何が考えられるでしょうか?

よろしくお願い致します。

—————————————-
説明不足でしたので追記します。
ie7_preview
上記画像のように真っ白で何も表示されません。そして画面下の赤マル内の数字(ページ数を表す)の分母の部分が1,2,3,4,…….止まらなく増え続けます。
という状態です。

—————————————-
タカハシ先生のアドバイスを基に作業してみました。

①>1.他のサイトのページを印刷プレビューしようとしたらどうなるか?
 制作中のサイトの他のページは問題ありませんでした。
 問題があるのはhttp://nobu-69.com/test_site/nolimits201304/nyukaigo.htmlのページのie7で見た時のみです。

②>2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
 それでどうなるか確認。
cssが切れた状態でプレビューされましたので、指摘にある通りcssのどこかに問題があるのかと思い調査しましたが、おかしな所は見当たりません。

③対策としてhtmlのheadの中のcssのリンクを以下の様にしてみました。

そしたら上記の「説明不足でしたので追記します。」の真っ白で分母が止まらない状態に逆戻り。

カテゴリー: 質問と回答 | タグ: , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

IEの印刷プレビューについて」への13件のフィードバック

  1. タカハシ先生タカハシ先生

    > ie7にするとプレビューが出来ません
    出来ない、というのはもう少し具体的に言うとどうなるのでしょう?
    プレビュー画面が真っ白なのと、印刷プレビューが起動しないのとは違いますが。

    返信
      1. タカハシ先生タカハシ先生

        「ie7 プレビュー 真っ白」で検索すると、そういう症状はあるようです。
        Web制作者として確認したいのは以下。問題を切り分けよう。

        1.他のサイトのページを印刷プレビューしようとしたらどうなるか?
        > 他のサイトも同じ現象になるなら、プリンタドライバやブラウザの問題
        > 自分の作ったページだけの問題なら、以下を調査。

        2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
         それでどうなるか確認。
        >プレビューが表示されるなら元のcssのどこかに問題があるかもしれない。
         通常のcssをmedia=”all”でリンクさせ、プリント時のcssをmedia=”print” として別に
         読み込ませて、そこで上書きする方法で修正を施す。

        media typeについては以下を参考に。media queryの元になった技術です。
        http://www.htmq.com/csskihon/009.shtml

        返信
        1. 真中のぶ真中のぶ 投稿作成者

          ありがとうございます。
          作業してみましたが、うまくいきません。作業内容は本文に記載しました。
          よろしくお願いします。

          返信
          1. タカハシ先生タカハシ先生

            一つ目のcssはmain.cssの間違いですよね?
            print用のcssのnyukaigo.cssの読み込ませ方はそれでOKです。

            それはそれとして、今、VistaのIE9で確認した所、IE7モードではページに横スクロールバーが出てます。これの原因を突き止めて、きちんと直すと、プリントの問題も直るかもしれません。

  2. 真中のぶ真中のぶ 投稿作成者

    >IE7モードではページに横スクロールバーが出てます。これの原因を突き止めて、きちんと直すと、プリントの問題も直るかもしれません。
    原因わからず………。バリデ―トかけても問題なしの様です。うーむ。

    返信
    1. タカハシ先生タカハシ先生

      > バリデ―トかけても問題なしの様です
      ならばIE7の変な挙動だ、という理解で、そいつを修正してあげましょう。
      たとえば、IE7のプリント用cssに以下を指定したらどうなりますか?

      body {
      /* A4に収まる様に */
      width: 200mm !important;
      margin: 0 auto !important;
      padding: 0 !important;
      overflow: hidden !important;
      }
      これで無限増殖ページ現象が収まるなら、
      見切れちゃう要素をどうするかを微調整して行けばなんとかなると思います。

      返信
  3. タカハシ先生タカハシ先生

    「砂山の棒倒し法」で問題の箇所を突き止めて、対策のcssもわかりました。
    解決方法だけが欲しい場合はご相談に応じます(へへへ)

    ヒント1
    ie7の無駄な横スクロールバーの出現は div#hogehoge をhtmlから削除すると消えます。
    なのでそこが原因です。全ページで出現する現象なので、全ページに共通して存在するdivですね。
    div#hogehoge のcssの指定を直せば解決します。

    ヒント2
    ie7の印刷プレビューでページ数が無限に増える現象は、このページでしか起こりません。
    案の定、そのページのコンテンツの一部分である div#fugafuga を削除すると収まります。
    なので、 div#fugafuga か、その内部に関係するcssが問題です。
    実際は、その内部のとある要素にあった、レイアウト上、無駄なcssプロパティを無くせば直りました。

    返信
    1. 真中のぶ真中のぶ 投稿作成者

      先日クライアントさんのパソコン環境をみてきました。ブラウザモードがie9の互換表示になってたので、ただのie9にしたら問題なく印刷プレビューできました。

      それはそれとして、悔しいので自力で問題の個所を見つけたいと思います。
      「砂山の棒倒し法」やってみます!

      返信
      1. 真中のぶ真中のぶ 投稿作成者

        「砂山の棒倒し法」やりました。

        無駄な横スクロールバーは、
        id=”header”の中が色々おかしかったです。
        直りました。

        無限現象は、
        #fukusou のフロートを削除で直りました。

        「砂山の棒倒し法」は今後使える対処法ですね。

        ありがとうございました!

        返信
  4. ピンバック: 2013-6-14 勉強会 | パソコン倶楽部りんご

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA