CSS/DHTMLバグ辞典スレッド【第5版】at HP
CSS/DHTMLバグ辞典スレッド【第5版】 - 暇つぶし2ch617:Name_Not_Found
19/06/15 08:07:04.60 .net
これはCSSのバグなのかどうか……。
InternetExplorer11/Windows8.1で確認。
・フォント・サイズをその要素の横幅以上に拡大すると、IVS(=基底文字+VS)のVSが文字化けする。
IVS(異体字シークエンス)は、「通常の文字と同様、数値文字参照を使って書くこともできる。フォントやOS、アプリケーションが対応していない場合には、通常の基底文字のグリフが単に表示される(ことが望まれるが、VSが豆腐などで表示されてしまうことが多い)。」
 URLリンク(shiromoji.hatenablog.jp)
ところが、別に「・」や「□」(豆腐)に化けてなかった文字も、フォント・サイズを一定以上に大きくすると四角になることがある。
下記一行のソースで再現できた。
<div style="font-size:51px; width:50px;">&#x9038;&#xE0101;/&#x9F4B;&#xE0101;</div>
どうもIE11はIVSを「基底文字+VS」で2文字と計算するらしく、
それで要素の横幅がフォント・サイズ1文字分(1em)より小さいと、1文字はみ出たVSの分だけ文字化けして表示され、基底文字の下に流れて配置される。
width指定で要素の幅がfont-sizeより広く取ってあっても、box-sizing: content-box;(既定)の場合にpaddingとかborderを入れると、この不具合が発現したりする。
floatでwidtj指定を入れる場合にも、注意↓。
実例 URLリンク(wakufactory.jp)
Firefox67やChrome75では再現しなかった。
ただ上記一行のソースは、Firefoxでは、
&#x9038;&#xE0101;/
&#x9F4B;&#xE0101;
と2行に表示され、
&#x9038;&#xE0101;

&#x9F4B;&#xE0101;
と3行に表示された。
「/」を「―」「■」等の記号に変更しても同様。


次ページ
続きを表示
1を表示
最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch