先日からAdobe Digital Editionsの奇妙な動作に嵌っていますが、いろいろ試したところどうやら分かってきたのは、最初に指定したプロパティがうまく働かないようだということです（CSSの場合、スタイルシートがいくつも使えるので、最初と言う言葉の定義も難しいですが）。
5/18追記：どうやらCSSにUTF-8のBOM（Byte Order Mark）が付いていたのが原因のようです。Adobe Digital Editionsの問題ではなくて、CSSの方の問題ということです。詳しくは次のTweetをご覧ください。
１．http://twitter.com/#!/MurakamiShinyu/status/70471711665033216
２．http://twitter.com/#!/MurakamiShinyu/status/70474839609180160
いやあ、やはり、@MurakamiShinyu はプロだよ!
ということで、下記は一応参考のために残しておきますが。もはや内容は単なる間違いの記録に過ぎません。皆様ご注意ください。
一応参考のために実験して分かってきたことを整理しておきます
「CSSで目的とする.fig {width}指定の前に、何らかのプロパティ指定（これは何でもよい）が入ると、Adobe Digital Editions では期待通りに表現される」
○資料
——————————————————-
１ re-Error-css-p-tuika.epub
——————————————————-
元ファイルの css にて、.fig の前に、 [.p] の backgland-color 指定を
入れる。
→正常に表示されている。
〈構文〉
.p {
background-color: pink;
}
.fig {
border-style: solid;
border-width: thin;
border-color: black;
width: 50%;
}
（以下、元ファイルと一緒）
—————————————————–
２ re-size-of-image.epub
—————————————————–
.fig のレイアウト指定を二つに分割。width 要素を最後に持ってくる。
HTMLでは、正常に表示する。
Adobe Digital Editionsでは、イメージのサイズは期待通り表示されるがborderは表示されない。
〈構文〉
/* test */
/* re-size-of-image */
.fig {
border-style: solid;
border-width: thin;
border-color: black;
}
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
width: 50%;
}
—————————————————–
３ re-Error-css-fig-bunkatsu2.epub
—————————————————–
.fig のレイアウト指定を二つ分割。最初に width 要素を持ってくる。
HTMLでは正常に表現されるが、Adobe Digtal Editionでは.figにwidthが反映されない。
（しかし、2とは逆にborderは表示されている。）
〈構文〉
/* test */
/* re-Error */
.fig {
width: 50%;
}
img.case-2 {
width: 100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
border-style: solid;
border-width: thin;
border-color: black;
}
これから見ると、どうやら指定順序が影響しているようだが、おそらくこれはAdobe Digital Editionsのバグではないだろうか。
１．のデータ
ファイルをダウンロード
元ファイルの css にて、.fig の前に、 [.p] の backgland-color 指定を入れる。
２．のデータ
ファイルをダウンロード
.fig のレイアウト指定を二つに分割。width 要素を最後に持ってくる。
３．のデータ
ファイルをダウンロード
.fig のレイアウト指定を二つ分割。最初に width 要素を持ってくる。
Adobe Digital Editions はどうやら最初に指定したプロパティが有効に働かないようだ（←間違いの記録）
瞬簡PDF 作成 2024
ドラッグ＆ドロップでPDF作成
HTML on Word
WebページをWordで作る！
