データベースに古い html マークアップを保存し、変更を追跡してから、Differと:html
format オプションを使用して差分をレンダリングしようとしています。
次のコードが正常に生成されます。
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<del class="differ">
<td>
<span id="someID">Previous Owner Name</span>
</td>
</del>
<ins class="differ">
<td>
<span id="someID">Current Owner Name</span>
</td>
</ins>
</tr>
...
</table>
<del>
および<ins>
タグ付きの要素に注意してください。
ソースを表示すると、問題ないように見えます。
しかし、これは明らかにテーブルのレイアウトを乱すため、すべてのブラウザーはこれらの新しい要素をテーブルの前に移動するようです。要素を検査すると、次のようになります。
<del class="differ"> </del>
<ins class="differ"> </ins>
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<td>
<span id="someID">Previous Owner Name</span>
</td>
<td>
<span id="someID">Current Owner Name</span>
</td>
</tr>
...
</table>
カスタム Rails ビュー ヘルパーを作成して、それぞれ<ins>
と<del>
を に置き換えてみました<span>
が、同じことが起こります。
私がやろうとしているような要素を使用してテーブルのスタイルを設定する方法はありますか、それとも dom を歩き回り、<td>
javascript を使用して適切なスタイルをそれぞれに適用する必要がありますか? ソースを制御していないため、最初にテーブルを置き換えることはできません。