←前へ 目次↑ 次へ→

4.11. 一般的なブラウザとの互換性

4.11.1. 互換性モードの切り替え

Copper PDFは、デフォルト(標準モード)ではCSS 2.1に準拠したレンダリングをしますが、 実用上の問題から一般的なブラウザとの互換モードが用意されています。 output.compatible_mode にmsieを指定することにより、Copper PDFはInternet Explorer 7に近いレイアウトをするように試みます。 このモードはCopper PDFのバージョンアップごとに一般的なブラウザと互換性を持つように改善が試みられますが、 完全な互換性を保証するものではありません。 また、制限事項があり、デフォルトのモードより非効率な処理が行われることがあるため、若干パフォーマンスが劣ります。

4.11.2. 標準モードとmsieモードの違い

CSSで数字のクラス名が認識される

標準モードでは数字のクラス名はエラーとなり無視されますが、msieモードでは有効です。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>数字のクラス名</title>
    <style type="text/css">
.A {
	color: Red;
}
.1 {
	color: Red;
}
    </style>
  </head>

  <body>
    <p class="a">このテキストは赤字です</p>
    <p class="1">msieモードではここも赤くなります</p>
  </body>
</html>

CSSで':'の代わりに'='が使用出来る

CSSでプロパティ名と値の区切り文字は':'ですが、msieモードでは'='も使用することが出来ます。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>':'の代わりに'='を使用する</title>
    <style type="text/css">
.A {
	color: Red;
}
.B {
	color=Red;
}
    </style>
  </head>

  <body>
    <p class="a">このテキストは赤字です</p>
    <p class="b">msieモードではここも赤くなります</p>
  </body>
</html>

CSSの色指定で#を省略しても認識される

msieモードではRGBコードで色を指定する場合、#を省略出来ます。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>色指定で#を省略する</title>
    <style type="text/css">
.A {
	color: #FF0000;
}
.B {
	color: FF0000;
}
    </style>
  </head>

  <body>
    <p class="a">このテキストは赤字です</p>
    <p class="b">msieモードではここも赤くなります</p>
  </body>
</html>

CSSの長さ指定で単位を省略しても認識される

msieモードでは長さ指定で単位を省略した場合、px単位による指定と認識されます。

フォームの前後にマージンが設定される

msieモードでは、デフォルトでフォーム(form要素)の前後に1.12emのマージンが設定されます。

段落と見出しのマージン上下のマージンをなくす場合がある

msieモードでは、段落または見出しが(p, h1~h6要素)の、 ページまたはテーブルセルの先頭にある場合、 前のマージンがなくなります。同様に末尾にある場合は後のマージンがなくなります。

ボックスの幅または高さに100%が指定された場合、外側のボックスをはみ出さない

widthまたはheightのパーセント指定は、 標準モードでは外側のボックスの幅に対して、ボックスの内側の幅を指定するため、 境界のあるボックスに対して100%を指定すると、ボックスが外側のボックスの内部からはみ出します。 msieモードでは100%指定された場合にボックスの外側の幅が外側のボックスの内側の幅に一致し、 0%指定された場合にボックスの内側の幅がゼロになるように計算します。

絶対位置指定ボックス、浮動ボックスの大きさが内容により拡張される

絶対位置指定ボックス、浮動ボックスにoverflow: visible;が指定され、 かつボックスの幅と高さが設定されている場合、 標準モードではボックスのサイズは常に固定で、内容がはみ出した部分はボックスの境界にかかりますが、 msieモードではボックスの内容によってボックスの幅と高さが拡張されます。

通常のフローのボックスが、幅が指定されたボックスにより拡張される

幅指定されたボックスに、より大きな幅のボックスが含まれている場合、 標準モードでは内部のボックスは外側のボックスをはみ出しますが、 msieモードでは外側のボックスの幅が、内側のボックスが収まるように拡張されます。

幅がautoの固定レイアウトテーブルが固定レイアウトのまま処理される

標準モードでは、table-layout: fixed;が指定されているテーブルであっても、 widthがautoであればtable-layout: auto; が指定されたのと同様に扱われます。

msieモードでは、widthがautoの場合は、 テーブルの外側の幅を、外側のボックスの内側の幅に合わせて固定し、固定レイアウトとして処理します。 ただし、全てのカラムに幅が明示されている場合は、テーブルの幅はカラムの指定幅の合計となります。

テーブル行に対するmax-heightが適用されない

msieモードではテーブル行に対するmax-heightの設定は無視されます。

ブロックに対するline-heightによる高さが確保されない

ブロックに対してline-heightが指定されている場合、 標準モードではブロック内の行に対して指定した高さが必ず確保されますが、 msieモードでは行内にインライン画像、インラインボックスまたはインラインテーブルだけが含まれ、 かつそれらの高さがline-heightより小さい場合は、 line-heightで指定された高さは確保されません。

全角スペースの間で折り返しされない

msieモードでは、全角スペースが連続している場合、その中での折り返しは発生しません。 また、全角スペースにより外側のボックスが拡張されることはありません。

input要素の高さが強制される

msieモードでは、input要素で配置されるフォームの高さが1.12emに強制されます。 heightは適用されません。

マージンの設定に関わらず中央寄せされる

img, input, applet, object, iframe, tableのalign属性による中央寄せは、 標準モードでは左右のマージンをautoにした状態margin: 0 auto;と同等ですが、 msieモードでは左右のマージンが設定された場合も中央寄せになります。

例えば、標準モードではmargin-left: 100pt;が指定されれば、 中央寄せが設定された要素でも常に左から100ptの位置に配置されますが、 msieモードでは中央寄せから左に100ptの1/2(つまり50pt)ずれた位置に配置されます。

匿名のテーブルセルにより補完されない

テーブル内で、かつテーブルセルの外にインライン、インラインブロックまたはインラインテーブルが配置された場合、 標準モードでは自動的に上位に匿名のセル要素が挿入されますが、 msieモードでは全てテーブルの前に表示されます。

インラインボックスにwidthが適用される

標準モードではwidthはインラインボックスには適用されませんが、 msieモードではwidthの設定によりインラインボックスの幅が変化します。

また、widthがauto以外に設定されたインラインボックスはインラインボックスと同様に配置されます。 すなわち、display: inline;が指定されている要素であっても、widthがauto以外であれば display: inline-block;が適用されているのと同じことになります。

text-alignがブロックの配置にも適用される

標準モードではtext-alignはテキストの配置にだけ適用されますが、 msieモードでは内部にある通常のフローのボックスの配置にも適用されます。 これはp要素やdiv要素等のalign属性と同様の挙動をします。

テーブルカラムのプロパティがセルに継承される

msieモードではテーブルカラムに設定された以下のプロパティがテーブルセルに継承されます。

上記のプロパティがテーブルセルと、テーブル行の両方に設定されている場合は、テーブル行のプロパティの方が継承されます。

widthが設定されたテーブルセルにはwhite-space: nowrap;が適用されない

標準モードではwhite-space: nowrap;が指定された領域ではテキストの折り返しが行われないため、 widthで幅が指定されたテーブルセルでは、内容が幅をはみ出すことがありますが、 msieモードではwidthで幅が指定されたテーブルセルではwhite-space: nowrap;が適用されず、 内容がはみ出さないようにテキストの折り返しが発生します。

4.11.3. 既知の制限事項

MS明朝系フォントの文字幅について

MS明朝、MSゴシックのフォントを使用する場合、一般的なブラウザでは小さなフォントサイズが指定された場合、 一番近いビットマップフォントが使用されるため、指定された文字サイズと実際に使われる文字サイズが異なることがありますが、 Copper PDFでは全てアウトラインフォントを使用するため、指定したとおりの文字サイズとなります。 そのため、文字幅が一般的なブラウザで表示する場合と異なり、文字列の折り返し位置等が異なることがあります。

サポートしていないCSSプロパティ

Internet Explorer独自のCSSプロパティで、以下のものはサポートしていません。

4.11.4. 自動レイアウトテーブル

CSS 2.1では自動レイアウトテーブル (デフォルト、あるいはtable-layout: auto;が指定されたテーブル) のレイアウトの調整方法について、明確な仕様が定められていないため、どうしても一般的なブラウザと若干のレイアウトの違いが生じます。 Copper PDF 2.0.7以降では、ほぼ一般的なブラウザに近いレイアウトとなりますが、なるべく以下のいずれかの条件の下で使用してください。


←前へ 目次↑ 次へ→
Copper PDF ©2008-2011 GNN & Co.,Ltd. All rights reserved.