現在、ホームページを作成し、印刷用の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で表示させるには、どのようにすればよいのでしょうか
No.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>
No.2
- 回答日時:
レンダリングエンジン(WebKit、Tridentなど)によって異なるものなのかもしれませんが、contentプロパティを適用することができるのが、:before擬似要素および:after擬似要素のみだからではないでしょうか。
また、メディアタイプを指定してスタイルを適用(@media print)するか、ページボックスを定義(@page)するかによるものと思います。
参考URL:http://www.htmq.com/index.htm
この回答への補足
印刷用のcss上には@printの指定は行っていました。
:afterや:beforeをつけてもうまくいかないです。
確かにレンダリングエンジンのせいだとは思うのですが、表示されません。
難しいです。
No.1
- 回答日時:
古いIE(IE7以前)は対応していません。
⇒この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ( http://webdesignrecipes.com/css-selectors-and-pr … )
googleが配布しているjavascriptを使うと良いでしょう。
⇒IE7/IE8.jsを使って、スタイルシートの標準化( http://ash.jp/web/css/ie8_js.htm )
この回答への補足
早速の回答ありがとうございました。
ご指摘の通り、組み込んでみましたが、うまくいかないようです。
ie9でみてもダメでした...
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
外部スタイルシートで定義した...
-
htmlのid属性って必要なの?
-
CSSのクラス名・ID名の指定でワ...
-
CSSでスクロールバーの色変更
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
CSS, リンクの色を一部変えるに...
-
サイトにjQueryが使用されてい...
-
livedoorブログでの背景画像サ...
-
印刷用CSS IEのとき、画像が印...
-
HP作成(ワッパーを中心に)
-
文字に綺麗な縁取りを
-
外部css定義したclassをht...
-
ページの左右の余白(枠外)に...
-
フロートのクリアについて
-
最近、HTMLのヘッダーをIDで定...
-
リンク文字の 一部だけ色を変...
-
CSSのタグ「#warpper」の意...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
フロートのクリアについて
-
スタイルシートでデザイン
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートで、id属性の中...
-
CSSで、DIV#hogeという記述は何...
-
Bootstrap3でcontainerがずれる...
-
外部css定義したclassをht...
-
divの入れ子を多用してページを...
おすすめ情報