IEで印刷時に画像が表示されない問題の解決方法
- 印刷用のCSSを作成している際に、IEでは画像が表示されない問題が発生しています。
- 問題の発生原因は、IEがcontentプロパティのurl()をサポートしていないためです。
- 解決策としては、背景画像として表示するか、imgタグで表示することでIEでも画像を表示させることができます。
- ベストアンサー
印刷用CSS IEのとき、画像が印刷できない
現在、ホームページを作成し、印刷用の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で表示させるには、どのようにすればよいのでしょうか
- 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でみてもダメでした．．．
関連するQ&A
- CSS IE6でのabsoluteズレ
フッターがブラウザに合わせて下部に固定するようにしていて フッターは横幅100%にしています。 他のブラウザでは全く問題ありませんが、IE６で見ると右にかなりずれて表示されてしまいます。 以下HTMLソース-------------------------- <div id="footer"> <div class="foot"><a title="トップにもどる" href="#top"><img src="common/images/pagetop.gif" alt="ページTOP" /></a></div> </div> 以下CSSソース-------------------------- #footer{ position:absolute; bottom:0px; height:20px; width:100%; background-image: url(../images/footbg.gif); background-repeat: repeat-x; } #footer .foot{ margin-left: auto; margin-right: auto; width:950px; } #footer .foot img{ float: right; padding-top:1px; } position:absolute;をとると下固定ではなくなりますが、ちゃんと真ん中に表示されます。 改善策をご教授願います。 よろしくお願いいたします。
- ベストアンサー
- CSS
- Mac IE5.2 のCSS対応
これまでコーディングはテーブルレイアウトばかりでやってきまして、 急いでフルCSSサイト作りの勉強をしているものです。 Windows Firefox、IE6 Macのsafari ではほぼ意図した通りに表示できるようになったのですが、Mac IE5.2ではどうもうまくいかない箇所があります。 listタグにスタイルを指定している部分がまったく効いてないのです。 ブラウザの対応など問題はあると思うのですが、これくらいはできるハズですよね？（汗）できるものと思ってアレコレ試しているのですが。 初歩的な質問でお恥ずかしいのですが、よろしくお願いします。 CSSはこんな感じです。 =========================================================== #header { padding-top: 0px; margin-bottom:20px; position:relative; width:800px; height: 78px; background-color:#575757; } #header #logo { position: absolute; top: 0px; } #header ul { margin: 0; padding: 0 20px 0 20px; list-style: none; float:right; width:550px; background-color:#676767; vertical-align:bottom; } #header li { display: inline; font-size:x-small; line-height:25px; height:25px; list-style-type: none; padding-left: 2.8em; vertical-align:middle; float:left; } #header li a { color:#ffffff; text-decoration: none; padding-left:15px; background:url(../images/arrow_bl2.gif) left no-repeat; } #header li a:visited { color:#ffffff; } #header li a:hover { color:#12A0ED; } =========================================================== htmlのほうはこちらです。 <div id="header"> <a href="../index.html" title="tabi-memo" id="logo"><img src="../images/title_s.gif" width="250" height="78"></a> <ul> <li><a href="../index.html">HOME</a></li> <li><a href=".html">●●</a></li>
- ベストアンサー
- HTML
- CSS：印刷時のレイアウト崩れについて
CSSを利用してレイアウトしたページを作成しています。 もう殆ど作りこんだ今になって気付いたのですが、記事本文のテキストが長くなり、印刷プレビュー時に改ページされる程度にまで伸びると、一挙にレイアウトが崩れてしまうようなのです。 こちらにつきまして回避策はありますでしょうか？ ★外部CSS部分 body { padding: 0px; margin: 0px; } #container { width: 762px; position: relative; margin: 0 auto; margin-left: auto; margin-right: auto; top: 0px; } #header { width: 549px; position: absolute; left: 212px; top: 3px; } #left { width: 211px; position: absolute; left: 1px; top: 0px; } #content_right { width: 510px; margin-left: 231px; padding-top: 149px; font-size: 0.8em; line-height: 140%; } #footlink { text-align: center; margin: 30px 0px 40px 0px; } ★HTML部分 <div id="container"> <div id="content_right"> <h1>h1テキスト</h1> <h2>h2テキスト</h2> <p>記事：この辺に印刷プレビューで改ページされるほど改行を入れた場合です</p> <div id="footlink"><a href="#">フッダリンク</a></div> </div> <div id="header">ヘッダメニューとかタイトル画像とか</div> <div id="left">左メニュー部分</div> <div>コピーライト</div> </div> どうにもならないようであれば、印刷時に記事部分だけ抜き出すようなカタチにするべきなのかと考えていますが、難しそうで少し尻込みしています。 良い手立てがあるようでしたら、是非教えてください。 よろしくお願いします。
- 締切済み
- HTML
- 【CSS】IE6で印刷時にレイアウトが崩れる
大変困っています。 印刷を前提に作ったページではないのですが、 クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。 そこで、IE6とFirefoxで確認したところ、 Firefoxではレイアウトが崩れずきちんと印刷されますが、 IE6では2カラムの右側（メイン部分）が消えてしまっています。 （IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。） 何か問題があれば、ご指摘お願い致します。 <div id="container" class="clearfix"> <div id="siteSub"> ああああああ </div> <div id="siteMain"> いいいいいい </div> </div> ■CSS-------------------------------- div#container{ width: 950px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } div#siteSub{ margin: 0px; padding: 0px; width: 230px; display: block; float: left; } div#siteMain{ padding: 0px; float: left; width: 710px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } 右側のメイン部分が消えてしまっているので、 大雑把にレイアウト部分だけ書いてみました。 siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。 linkの部分は media="all"としています。 <link rel="stylesheet" type="text/css" href="css/import.css" media="all"> また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。
- 締切済み
- HTML
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- IE9でのCSSスプライト
*****html***** <div id="head"> <ul> <li id="scope1"><a href="index.html">トップ</a></li> </ul> </div> ************* *****css***** div#head ul { position:absolute; top:10px; left:10px; width:600px; height:30px; overflow:hidden; } div#head ul li { list-style-type:none; display:inline; } div#head ul li#scope1 a{ background: url('test.png') 0px 0px; width:100px; height:50px; text-indent:-9999px; display:block; position:absolute; top:0px; left:0px; } div#head ul li#scope1 a:hover { background:url('test.png') 0px -50px; } ************** 上記のような記述で、IE9で表示させたところ、もちろんうまく動作します。 ところが、「display」の部分を2ヶ所両方ともはずしても、なんら問題なく動作しています。 block属性にするのは、<a>で指定したリンクを文字部分だけでなくを画像部分全体に 適用するためだと思っていたのですが、指定しないとまずいものなのでしょうか？
- ベストアンサー
- CSS
- ＨＴＭＬとCSSでの画像位置について教えてくださ
こんにちは。 アメブロと言うブログでデザインとカスタマイズを依頼されました。 希望はヘッダー画像そのものにリンクを張りたいのですが、ＨＴＭＬ編集機能がありません（ＣＳＳのみ）。 プロフィール欄のみＨＴＭＬ編集ができるので、そこに下記のＨＴＭＬソースを書き、画像にリンクを張りました。 <div style="position:absolute;top:-320px;left:15px;"><a href="http://ameblo.jp/vice-president"><img border="0" src="http://stat.ameba.jp/user_images/da/d2/10014814202.jpg" width="700" height="366"></a> </div> ※top:-10px－プロフィールのあるサイドバーの上端からの位置 left:0px－サイドバーの左端からの位置 ＩＥではきちんと表示されたのですが、firefoxでは画像位置が崩れてしまいます。どのように記述したらよいでしょうか？ よろしくお願いします。
- 締切済み
- CSS
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- CSS 配置 Absolute、Margin
お世話になります。 CSSを使用してWebサイトを作成しているのですが、ある画像の上にもう一つの画像を重ねたいと思っています。そんな時まず後ろの画像を配置し、その次に上に重ねる画像をPosition:absolute; margin:xxpx; として表示させています。IE以外で表示されるのと、IEで表示される位置が違うので困っています。 とりあえず画像の表示方法は以下のよう HTML <div id="a"> <img src="aaa.jpg"> <div id="b"></div></div> CSS #a {float:left; overflow:hidden;} #b {position:absolute; margin:-40px; height:10px; width:20px; background:url(aa.jpg);} IEすべて同じように表示されるのかと思いましたが、今日学校のPCで見たところ、IE以外のブラウザで表示されるのと同じように表示されていました。 今のところはIEのみのCSSとその他のCSSとの設定でやりくりしていますが、すべてのブラウザでどんな場合も同じように（まったく同じは無理だとは思いますが）表示させる方法を教えてください。 CSSを使い分けたりするのではなく。一つのCSSだけで；
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSのロールオーバーがIEで崩れます
CSSのロールオーバーでメニューを制作しています。 背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。 （IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。） しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。 ロールオーバー自体でなく、他の部分がおかしいのでしょうか？ ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。 タイトル画像が120x26で、その横に絶対配置で並べています。 ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、 問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。 （メニュー項目の数等一部省略しているところがあります。） よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> ～略～ </div>
- ベストアンサー
- CSS
補足
印刷用のcss上には@printの指定は行っていました。 :afterや:beforeをつけてもうまくいかないです。 確かにレンダリングエンジンのせいだとは思うのですが、表示されません。 難しいです。