現在、ホームページを作成し、印刷用のcssの作成をしております。そこで、chromeやsafariでは表示できるのに、ieでは印刷時に画像が表示されない部分があります。以下のようなhtml、cssにてコーディングしております。【HTML】 Top 【print.css】 .hoge a{ content: url("../images/print/img_header_pr.jpg"); position: absolute; top: 9px; left: 9px; } IEで表示させるには、どのようにすればよいのでしょうか

印刷には適用されないようですね。印刷を考慮したページでしたら、後方互換のため次のように書くほうが良いでしょう。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み。HTML4.01strict+CSS2.1 ★タブは＿に置換してあるので戻すこと。＿＿サンプル＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ Top ＿＿＿＿製品＿＿＿＿書籍＿＿＿＿紹介＿＿＿＿＿＿＿＿＿見出し＿＿トップへ＿＿＿＿文書情報＿＿＿＿＿ First Published ＿＿＿ 2012-08-10 ＿＿＿ Last Modified ＿＿＿ 2012-08-10 12:00:00 (JST) ＿＿＿＿ © ORUKA1951 2012 - 2016 All Rights Reserved mailto:***** ＿

古い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 )

印刷用CSS　IEのとき、画像が印刷できない

解決済

質問者：hhiroki_77
質問日時：2013/03/31 13:10
回答数：3件

現在、ホームページを作成し、印刷用のcssの作成をしております。
そこで、chromeやsafariでは表示できるのに、ieでは印刷時に画像が表示されない部分があります。

以下のようなhtml、cssにてコーディングしております。

【HTML】
<div class="hoge">
　　<a href="./">Top</a>
</div>

【print.css】
.hoge a{
content: url("../images/print/img_header_pr.jpg");
position: absolute;
top: 9px;
left: 9px;
}

IEで表示させるには、どのようにすればよいのでしょうか

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2013/03/31 18:33

印刷には適用されないようですね。

印刷を考慮したページでしたら、後方互換のため次のように書くほうが良いでしょう。

★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">

</style>
<style type="text/css" media="print">

</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>

- 0
- 件

通報する

No.2

回答者： OKWave_Kaz
回答日時：2013/03/31 16:08

レンダリングエンジン（WebKit、Tridentなど）によって異なるものなのかもしれませんが、contentプロパティを適用することができるのが、:before擬似要素および:after擬似要素のみだからではないでしょうか。

また、メディアタイプを指定してスタイルを適用（@media print）するか、ページボックスを定義（@page）するかによるものと思います。

参考URL：http://www.htmq.com/index.htm

この回答への補足

印刷用のcss上には@printの指定は行っていました。
:afterや:beforeをつけてもうまくいかないです。

確かにレンダリングエンジンのせいだとは思うのですが、表示されません。
難しいです。

補足日時：2013/03/31 17:26

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2013/03/31 15:45

古いIE(IE7以前)は対応していません。

　⇒この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ( http://webdesignrecipes.com/css-selectors-and-pr … )
googleが配布しているjavascriptを使うと良いでしょう。
　⇒IE7/IE8.jsを使って、スタイルシートの標準化( http://ash.jp/web/css/ie8_js.htm )

　