Firefoxでブラウザの標準機能を使ってMHTかMAFFで保存した際にappendChildしたDOM要素が削除されたり一つ上の要素に追加された場合。
ナンダコレ
要するに見た目通りにちゃんと保存されない。
これはp要素(タグ)の中にブロック要素を入れているのが原因。
InternetExplorerだとどうなるんだろう。
HTMLの仕様にはp要素の中にはブロック要素を入れられない、と言うのがある。
しかし実際には追加は可能。
(ブラウザの拡張仕様と言うべきか。と言うか入れるな)
そして追加は可能なのに保存する際にDOMのエラーを修正する様でその都合で追加可能な最初の位置にDOM要素が移動する、と言うのが動作の真相である。(推測)
追加可能な最初の位置はどこかと言うとp要素の親から見て次の子要素。
と言うわけで、これを回避する方法。
少し考えれば分ると思うが2通り。
其ノ一
「p要素はブロック要素を含んではいけないのでブロック要素を使わない。」
元々用意されているHTMLタグの内、ブロック要素以外の物つまりインライン要素を使えば良いので
<span style="display:block;"></span>
インライン要素にdisplay:block;をつけることでブロック要素化する。
この要素を追加していくことでエラーとなるブロック要素が追加される事を避ける。
こちらは親となるDOM要素を変更できない場合に有効。
ブロック要素とはp,div,ul,li,dl,dd等の要素。
其ノ二
「p要素はブロック要素を含んではいけないのでp要素を使わない。」
こちらはもっと根本的な解決方法。
p要素を例えばdiv要素に置換して任意のブロック要素を使えるようにする。
注意点としてはparentNode等の単一の要素を指定するプロパティは大抵読み込み専用なので親要素から変更する。tagNameも読み込み専用。
タグ名を置換する事は不可能なので取りあえずreplaceChild(div, p)を使う。
要素を置換するとスタイルシートの対応が変わるかもしれない。
構造的な問題なのでスクリプトで対処するのではなく元のHTMLソースを変更しよう。
普通は起きないけど。
参考
replaceChild()メソッド。
http://www.marguerite.jp/Nihongo/WWW/RefDOM/replaceChild.html
jQuery().replaceWith()
http://api.jquery.com/replaceWith/