問題タブ [em]

コードもここにあります：http：//jsfiddle.net/wMfMT/5/

この単純なHTMLブロック：

そしてこのcss：

Firefoxでは正しくレンダリングされますが（単語ごとにサイズが異なります）、Chromeでは正しくレンダリングされません（5番目と4番目は同じサイズです）。最初はcssの問題だと思いましたが、htmlを調べたところ、Chromeで次のようにレンダリングされたことがわかりました。

私の質問は次のとおりです。

1. 私のhtmlは正しいですか（em-sをネストする標準に従って大丈夫ですか？）
2. はいの場合、回避策はありますか？*
3. これは既知のバグですか？そうでない場合はどこに報告すればよいですか？

*）私はこのコードをWordPressプラグインに入れており、多くの人が独自のcssを追加してカスタマイズしているため、emからspanなどに変更するとサイトにブレーキがかかります。cssを変更せずに回避策を探しています

http://code.google.com/p/chromium/issues/detail?id=126096にバグレポートを追加しました

CSS では、emドキュメントのフォント サイズに基づく相対的な単位です。では、ドキュメント自体のフォントサイズがems で測定されemている場合、正確には何ですか? 次のように言うとします。

したがって、 anemは再帰的に定義されます。では、これはブラウザによってどのように処理されるのでしょうか?

W3Cのドキュメントには次のように書かれています。

'em' 単位は、それが使用されている要素の 'font-size' プロパティの計算値と同じです。例外は、'font-size' プロパティ自体の値に 'em' が含まれている場合です。この場合、親要素のフォント サイズを参照します。垂直または水平の測定に使用できます。(この単位は、タイポグラフィ テキストではクワッド幅と呼ばれることもあります。)

しかし、要素がdocument.bodyで、親要素がない場合はどうなるでしょうか?

複数の解像度で作業する場合、「em」ベースのアプローチは、css ファイルをコーディングするのに適しているようです。ただし、480x800 と 540x960 の 2 つの解像度がある場合、幅の比率 (540/480 = 112.5%) は高さの比率 (960/800 = 120%) と同じではありません。

したがって、低解像度から高解像度に移動するために em フォント サイズ = 112.5% を使用している場合、幅は新しい解像度に完全に一致しているように見えますが、高さ (120% のフォント サイズが予想される) が不足しているように見え、そのため白が存在します。ページのすべての要素をレンダリングした後、下部に空白スペースが作成されます。

この問題の解決策は大きな助けになるでしょう!

このメニューがあります。http://fhemmel.host56.com/stack/ ウィンドウのサイズを変更すると拡大縮小したいのですが、% と EM で正しく表示されます。xとyの位置とベース位置を修正して表示させようとしましたが、表示できません。

誰？

ウェブサイトを作成していますが、モバイル ブラウザにも対応させたいと考えています。理論的には、px の代わりに em を使用すると、ユーザー設定に基づいてレイアウトのサイズをより簡単に変更できます。しかし、最近では、私が理解しているように、最新のブラウザーは px レイアウトと em レイアウトのサイズを変更できるため、数年前ほど関連性がなくなっている可能性があります。

しかし、モバイルブラウザはどうですか? モバイル デバイスでは、どちらを使用する方がよいでしょうか?

この質問で私を助けることができれば、私はとても感謝しています!

乾杯。

I understand that the "em" measurement is a relative unit for font-size, relative to the font-size of the containing element if it's specified in an absolute unit like px, or to the default font-size in the browser.

But I'm trying to understand how using em as a measurement for the border-radius of a box element, like a div, works. I'm assuming it's related to how using em as a measurement for the width or height of a box works.

Is it still related to font-size? How, specifically, is it measured? The explanations for how border-radius is computed that I've been able to find all seem to be based on px units.

これは、'em' 測定で完全な Web ページ レイアウトを作成する最初の試みです。ライブ プレビュー マークダウン エディターを構築しています。

このページは Firefox と chrome で完全に動作しますが、IE (私は IE9 を持っています) と Opera (昨夜更新) では、テキスト領域が境界線を大きく引き離します。Opera では、テキストエリアの境界線も角が丸くなっていません。（テキスト領域は角が丸くなっていますが、境界線は表示されていません）

テキストエリアのCSSです

これはhtmlスニペットです

本文に「フォント: 100%」を設定しました。 確認する必要がある場合は、デモのリンクを次に示します。

少し初心者で、おそらく非常に単純な何かを理解しようとしています:

テキストを「スタック」しようとしていますが、次のように、大きな単語の間に小さな単語が 1 つ挿入されています。

これ

あります

重要

文

そこで、HTML を独自のクラスにメイン テキストを配置し、フォント サイズを 8em にして、中央に小さな単語のスパンを配置しました。

CSS では、「重要」のクラスを設定しました。

...そしてそれはそこにあり、見栄えはしますが、行の高さが足りないようです。「重要」という単語のサイズは 0.5em ですが、行の高さは他の単語と同じ高さなので、IS AN の後と「重要」の前に巨大なスペースができます。

「重要」の両側で、スパンの内側と外側の両方でbrを試しました。

...しかし、行の高さを取得できないようです。私は何を間違っていますか？

私はアダプティブ サイトに取り組んでおり、すべてを em 値で作成しています。それにもかかわらず、私は em の解釈において Chrome と Mozilla の間に違いがあります。ウェブサイトは dev.morodeer.ru/stroymoidom です。問題はアイコン付きの金属棒にあります。約 670px の幅では、Chrome のすべてが優れていますが、Mozilla は右端をカットします (中央のラッパーの幅が 90% に設定されているため)。また、ブラウザーの幅が同じ場合、mozilla のメタル バーは小さいため、Mozilla はより小さいフォント サイズをカウントするのではないかと思います。

可能な対応をよろしくお願いします。

最適なフォントサイズとレイアウトサイズについて読んでいます...そしてpxの代わりにemを調べています。

私が理解していることから、私がこのようにcssを作成すると、

ブラウザに16px=1emを強制します。これにより、目的のピクセル/ 16を計算して、幅と高さのプロパティを実行できるようになります。