HTMLのコメントで表示の出し分けをするな

とあるサイトの検索結果がFirefoxでレイアウト崩れを起こしていたので調べてみたら、下記のような処理をしているっぽいことがわかりました。言語はわからなかったので仮にPHPとします。

予想プログラム

<?php if($count==0){ ?>
＜!--
<?php } ?>
<a href="sample?s=<?php echo $keyword ?>&aaa=1&bbb=2">xxxxxxx</a>
検索結果<?php echo $count ?>件
・・・
<?php if($count==0){ ?>
--＞
<?php } ?>

解説

検索結果が0件のときは、検索結果エリアをHTMLのコメントで非表示にしていました。なにか事情があったのかもしれませんが、あまりこういう方法はオススメできません。

レイアウト崩れの原因

$keyword に「--」半角ハイフン2つ(以上)が格納されていた場合、aタグ中身が

<a href="sample?s=--&aaa=1&bbb=2">xxxxxxx</a>

となり、「-- ... >」 でコメント終了と判断されてしまうようです。そのためブラウザ上には、

xxxxxxx</a>
検索結果0件
・・・

と表示されてしまいます。これが原因でHTML構造がおかしくなり、レイアウト崩れを起こしていました。

参考ページ

コメントアウト を利用してて途中に「--」が入ってるとブラウザが解釈を間違えることがある。

最近のブラウザは賢いから平気かなと思ったらFirefoxではﾀﾞﾒﾎﾟな模様なので気をつけないといけない。

HTMLコメントアウトタグの罠 | WEBプログラム覚書

対策

HTMLのコメントで非表示にしても、変数の内容は展開されてしまうので、非表示にするなら、HTMLに吐かれないようにプログラム側で処理すべきですね。

何故こんなことを…

それにしても何故こんなことをやっているのかと思ってそのサイトを見てみたら、他のページでも普通にHTMLのコメントで要素を非表示にしていました。。。
ナンテコッタイ＼(^o^)／