CSSコミュのIEでの不具合について

はじめまして。質問です。

IEとFirefoxの両方で、上の図のような表を印刷させるプログラムを組んでいます…

上の図の実線で囲んである部分に注目してもらいたいのですが…

左図がIE6の画面で、右図がFirefoxの画面なんですが、ご覧の通り、IE6の方だけ端が表示されないという問題が発生しています。

いろいろ調べたところ、CSSに「position: relative;」を付ければ解決するらしく、やってみて端が表示される問題は解決されたのですが、これのせいで実線で囲んだ部分が1行ずれて印刷されてしまうという問題が発生しています。

ちなみに、IE7でも同じ問題が発生しました。
これはIEのバグなんでしょうか？

どうすれば，ずれないで印刷できるかがわかりません。

詳しい方がいらっしゃれば、教えていただきたいと思います。
よろしくお願いいたします。

コメント(8)

最初
全て
最新の40件

[2] mixiユーザー 01月03日 22:05

あてずっぽですが、「1行ずれて印刷されてしまう」なら、その行のline-heightを小さくしてみては。
もしくは「position: relative;」が正しい解決策ではないのかも。
そもそも、その表ならtableでいいんじゃ・・・という気持ちもなくはないですが。

[3] mixiユーザー 01月03日 22:15

手っ取り早くゎハックでＩＥにのみ対策が一番かと・・・
(状況が詳しく分からなぃのでなんとも言ぇなぃのでふが・・・ｗ)
（；=´ω`=）y─┛~~

[4] mixiユーザー 01月04日 03:58

>宮腰さん
はじめまして。
ソースがないので詳しくコメントできませんが、記入欄もまとめてtable一つでレイアウトする前提でお話しします（恐らくフルCSSでコーディングしていたら、上記のような問題は発生し難いと推測したため→position:relative;は使いません）。

IEのバグという認識は持っていませんが、確かにtableやform周りのマークアップってブラウザごとに「癖」、ありますよね（自分はよくform周りで発狂することが多いです）。
実際、同じ体裁でマークアップして、IE7、IE6、FF3、FF2で印刷してみましたが、自分のマシーンでは問題なく表示されました。

前置きが長くなりましたが、今回のようなにtable内の一部の罫線の太さや色を変更する場合は、IE対策として、html側でtableに「border="0"」を入れるのがポイントです（CSSをOFFにした場合、とても見栄えが悪くなってしまいますが・・・）。

/*===============================
参考までに自分が書いたソースは以下です。
===============================*/
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
.sample{width:100%;border-collapse:collapse;border-top:1px solid #999;border-left:1px solid #999;}
th,td{padding:3px;border-right:1px solid #999;border-bottom:1px solid #999;}
th.top,td.middle,td.bottom{border-right:3px solid #000;border-left:3px solid #000;}
th.top{border-top:3px solid #000;}
td.bottom{border-bottom:3px solid #000;}
</style>
</head>
<body>
<table summary="サンプル" cellspacing="0" border="0" class="sample">
<tbody>
<tr>
<th>氏名</th>
<td colspan="2">abc def </td>
<td> </td>
</tr>
<tr>
<th>郵便番号</th>
<td colspan="2">000-1234</td>
<td> </td>
</tr>
<tr>
<th>住所</th>
<td colspan="2">hogehogehogehogehogehogehogehoge</td>
<td> </td>
</tr>
<tr>
<th>電話番号</th>
<td colspan="2">090-9876-0000</td>
<td> </td>
</tr>
<tr>
<th>FAX</th>
<td colspan="2">020-0000-1234</td>
<td> </td>
</tr>
<tr>
<th>メールアドレス</th>
<td colspan="2">sdぁfはsふぁしぇいふぃ</td>
<th class="top">※記入欄</th>
</tr>
<tr>
<th>希望支払方法</th>
<td colspan="2">指定なし</td>
<td class="middle"> </td>
</tr>
<tr>
<th rowspan="2">希望配達日時</th>
<td>日程</td>
<td>指定なし</td>
<td class="middle"> </td>
</tr>
<tr>
<td>時間帯</td>
<td>指定なし</td>
<td class="middle"> </td>
</tr>
<tr>
<th>備考</th>
<td colspan="2">ggfggfdfggfdfdfgdgdgfgsfdgsfghgfjggftr</td>
<td class="bottom"> </td>
</tr>
</tbody>
</table>
</body>
</html>
/*=============================*/
参考になれば、幸いです。
確認ブラウザ：Windows Vista IE7,FF3、
　　　　　　　Windows XP IE6,FF2
　　　　　　　（音声ブラウザには未対応）

[6] mixiユーザー 01月04日 11:09

>5. Kusakabeさん
ご指摘ありがとうございます。
よくよく考えたら、border属性自体を書かないことで対応できることを確認しました。

>4. 一部修正します
/*======================================================
【誤】<table summary="サンプル" cellspacing="0" border="0" class="sample">
　↓
【正】<table summary="サンプル" cellspacing="0" class="sample">
======================================================*/

tableを使った表においては、「CSSが効いていない場合、線だけでも表示させたい」という考えから、「htmlでborder="1"を記述しておいて、CSSで線を消すなり色をつけるなりの処理をする」習慣がついてしまっていて、tableにおいては「border」ありきで考えてしまってました。失礼しました。

あれ？ということは、なぜIEで太枠の端の線が消えて印刷されてしまうのでしょう？
ソースが気になります。

[7] mixiユーザー 01月20日 15:42

返信遅くなってしまいました。
大変申し訳ありません。

たけたけさんのおっしゃった通り、tableタグのborder属性を書かず、CSSファイルにてth,tdタグの設定を行ったところ、解決しました！

修正する前のソースは以下のとおりです。

=======ソース1==========

【CSSファイル】
.Solid1 {
position: relative;
border-top: solid 4px;
border-left: solid 4px;
border-right: solid 4px;
}

.Solid2 {
position: relative;
border-left: solid 4px;
border-right: solid 4px;
}

.Solid3 {
position: relative;
border-left: solid 4px;
border-right: solid 4px;
border-bottom: solid 4px;
}

【HTMLファイル】
<table border="1">
<tr><th width="120">氏名</th><td width="250" colspan="2">○○</td><td width="175">　</td></tr>
<tr><th width="120">郵便番号</th><td width="250" colspan="2">○○}</td><td width="175">　</td></tr>
<tr><th width="120">住所</th><td width="250" colspan="2">○○</td><td width="175">　</td></tr>

<tr><th width="120">電話番号</th><td width="250" colspan="2">○○</td><td width="175">　</td></tr>
<tr><th width="120">FAX</th><td width="250" colspan="2">○○</td><td width="175">　</td></tr>
<tr><th width="120">メールアドレス</th><td width="250" colspan="2">○○</td><th class="Solid1" width="175">※記入欄</th></tr>
<tr><th width="120">希望支払方法</th><td width="250" colspan="2">○○</td><td class="Solid2" width="175">　</td></tr>
<tr><th width="120" rowspan="2">希望配達日時</th><th width="60">日程</th><td width="190">○○</td><td class="Solid2" width="175">　</td></tr>
<th width="60">時間帯</th><td width="190">○○</td><td class="Solid2" width="175">　</td></tr>
<tr><th width="120">備考</th><td width="250" colspan="2">○○</td><td class="Solid3" width="175">　</td></tr>
</table>

=====ソース1====

ただ、疑問なのが…

=======ソース2==========

【CSSファイル】
th.top1, th.top2, th.top3 {
position: relative;
border-top: solid 4px;
}

th.top1, th.top3, th.middle1, td.middle1, td.middle3, th.bottom, td.bottom3 {
　　　　position: relative;
　　　　border-left: solid 4px;
}

th.top2, th.top3, td.middle2, td.middle3, td.bottom2, td.bottom3 {
position: relative;
border-right: solid 4px;
}

th.bottom, td.bottom1, td.bottom1, td.bottom2, td.bottom3 {
position: relative;
border-bottom: solid 4px;
}

【HTMLファイル】
<table class="line" cellspacing="0">
<tr class="line_bottom"><th>生産者名</th><th>生産物名</th><th>数量</th><th class="top1">※価格</th><th class="top2">※備考</th></tr>

<tr><td width="100" rowspan="{$count+1}">{$producers_name}</td>
<td width="150">{$product_name}</td><td align="right" width="75">{$product_quantity}</td>
<td class="middle1" width="75">　</td>
<td class="middle2" width="125">　</td>
</tr>
<tr><td>○○</td>
<td align="right">××</td>
<td class="middle1">　</td>
<td class="middle2">　</td>
</tr>
<tr><th rowspan="4" colspan="2"></th><th class="top1">※小計</th><td>　</td><td class="middle2">　</td></tr>
<tr><th class="middle1">※送料</th><td>　</td><td class="middle2">　</td></tr>
<tr><th class="middle1">※諸経費</th><td>　</td><td class="middle2">　</td></tr>
<tr><th class="bottom">合計</th><td class="bottom1">　</td><td class="bottom2">　</td></tr>
</table>

========ソース2=========

ソース2（HTMLの部分）をソース1（HTMLの部分）の前につけると、前者はちゃんとずれないで印刷されるのに、後者の方はずれて印刷されてしまうってのがなぜだかわかりませんでした。

簡単に言うと､印刷時にずれて表示される原因は「position: relative;」だと思うのですが、ソース2の方は「position: relative;」を使っているにも関わらず、ずれないのはなぜ？

ってことですね…

わかりにくい説明ですいません。

コメントしてくれた皆様、ありがとうございましたm(__)m

ログインすると、みんなのコメントがもっと見れるよ