MYSQLに保存したHTMLを呼び出したらCSSが効かなかった理由

SQLに保存したHTMLを呼び出したらCSSが効かなかった理由

昨日に引き続き、MYSQLへのHTML保存とその呼出しについてです。
<br>や<div>などのタグが取り出せていない方は昨日の記事をご覧ください。

今回は、タグは取り出せて形成はできているのにCSSが効かないという事例についての備忘録です。

CSSに .img{max-width:100%;}を書いたのに画像が飛び出る

実際に私に発生した事例です。

マニュアル用の画像を張り付けて表示したところ、画像サイズが大きく予定よりも飛び出てしまいます。
念のため、img に直接 max-width を書き入れると目的の通りに動作します。

「ん？これは確実にCSSが効いていない…。」
しかし理由がイマイチつかめません。

取り合えずやってみた事

まずサニタイジングとデコードの方法を変更してみました。

正しいのは 1,2 ですが、3,4 は念のための実行です。
でも結果は同じ『CSSが効かない…。』

試しにサニタイジングしないでレコードを保存してみる

保存時何も処理せずに保存してみました。

その結果、画像サイズが調整され意図した表示になっています…。

と言う事は、HTMLをそのまま格納しなきゃいけないのか？？
でもそれってセキュリティー上どうなんだって話ですよね。

出力されたHTMLのソースを見てみる事に

HTMLをそのまま保存した方ではCSSが効いていると言う事はCSSの読込や設定に問題は無いと言う事。
MySQLから取り出し展開したものがおかしいと言う事です。

なので、出力されたソースを見てみる事にしました。

上は実際のソースです。
【＜】などはしっかりdecode出来ています。が【&#039;】と一部デコードされていないものがあります。

なるほど、シングルクォーテーションが何故かデコードできていないのね。
でもhtmlentities も htmlspecialchars もシングルクォーテーションをエンコードしているのでデコードも出来るはず。

調べてみると【 ’ 】の取り扱いは要注意なのだそうです。

&#039; をデコードすると シングルコーテーションにならない

【 ’ 】はエンコードすると【&#039;】になり、デコードすると【&apos;】になるとの事。

そしてブラウザ側で【 &apos; 】はシングルコーテーションとして表示しないのだそうです。

マジか。

シングルをダブルに変えて書き込んでCSS読み込み成功

シングルコーテーションをダブルコーテーションに変更してMySQLに保存。リロードしたところCSSが動いている

sauceを確認するとこの通り

なるほど、これだけの問題なのね。

まとめ

こんな事もあるのかと良い経験が出来ました。

さぁ、マニュアル作り頑張ります！