ザリガニデザインオフィス

ブラウザの禁則処理の違いのサムネイル

ブラウザの禁則処理の違い

改行位置が変わって「!」ってなる

自分はFirefoxユーザーなのですが、Chromeと禁則処理に関するブラウザの解釈の違いで、時々不意を突かれます。標準化が進んでも、まだまだブラウザ間の差異はあるんですね。

具体的には小っちゃい「っ」などの扱いについてです。通常ですと、「、」や「。」など文字、閉じ鍵カッコなどが行頭に来ないように手前の文字と一緒に改行が入ります。しかし、小さい「っ」や「ー」のような文字の扱いはブラウザによって差異があるようです。具体的には以下の画像のようになります。

Chrome

Firefox

基本的には、Firefoxの方が禁則が強く、小さい文字や伸ばし棒が行頭にきません。なので、Chrome環境だけだと思わぬところで改行が入って、1行余分に増えることがあります。逆に、Firefox環境だけで見ていると、1行減ることがあります。特にheightを指定している時はレイアウトが崩れることがあるので注意して下さい。

やっぱりクロスブラウザチェックは大切ですね。