- ベストアンサー
IEで印刷時に画像が表示されない問題の解決方法
- 印刷用のCSSを作成している際に、IEでは画像が表示されない問題が発生しています。
- 問題の発生原因は、IEがcontentプロパティのurl()をサポートしていないためです。
- 解決策としては、背景画像として表示するか、imgタグで表示することでIEでも画像を表示させることができます。
- hhiroki_77
- お礼率25% (6/24)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
印刷には適用されないようですね。 印刷を考慮したページでしたら、後方互換のため次のように書くほうが良いでしょう。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み。HTML4.01strict+CSS2.1 ★タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> <style type="text/css" media="screen"> <!-- a img{border:none;}/* IE対策 */ div.header h1{ width:900px;height:210px; margin:0 auto; overflow:hidden; text-indent:-900px; position:relative; } div.header h1 a{ display:block;width:100%;height:100%; background: url("../images/main/img_header.jpg") top left no-repeat; } div.header h1 a:hover { background-position:bottom left; } --> </style> <style type="text/css" media="print"> <!-- a img{border:none;} div.header div.nav a:after{content:"\A( http://hoge.com"attr(href)" )";withe-space:pre;} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1><a href="./"><img src="../images/print/img_header_pr.jpg" width="900" height="210" alt="ようこそ****のサイトへ"></a></h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/product">製品</a></li> ＿＿＿＿<li><a href="/books">書籍</a></li> ＿＿＿＿<li><a href="/profile">紹介</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p class="goTop"><a href="/">トップへ</a></p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- OKWave_Kaz
- ベストアンサー率25% (2/8)
レンダリングエンジン（WebKit、Tridentなど）によって異なるものなのかもしれませんが、contentプロパティを適用することができるのが、:before擬似要素および:after擬似要素のみだからではないでしょうか。 また、メディアタイプを指定してスタイルを適用（@media print）するか、ページボックスを定義（@page）するかによるものと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
古いIE(IE7以前)は対応していません。 ⇒この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ( http://webdesignrecipes.com/css-selectors-and-properties-with-ie7/ ) googleが配布しているjavascriptを使うと良いでしょう。 ⇒IE7/IE8.jsを使って、スタイルシートの標準化( http://ash.jp/web/css/ie8_js.htm )
補足
早速の回答ありがとうございました。 ご指摘の通り、組み込んでみましたが、うまくいかないようです。 ie9でみてもダメでした．．．
補足
印刷用のcss上には@printの指定は行っていました。 :afterや:beforeをつけてもうまくいかないです。 確かにレンダリングエンジンのせいだとは思うのですが、表示されません。 難しいです。