7

設定：

Dan Cederholm の Bullet Proof Web Design (ISBN 0-321-34693-9) で説明されているように、ヘッダーがあり、テキストの量に応じて拡張される、角が丸いシンプルなボックスがあります。

Google Chrome でズームする場合を除いて、うまく機能します。すると、ボックスの右マージンが消えます。

IE と FireFox では問題なく動作します。

例：

jsFiddle での例

クロムでは、ズーム 110% やその他のズームでも失敗します。IE や FireFox では問題ありません。

質問:

  1. これを引き起こしているアイデアはありますか？

  2. 一般に、レイアウトがズームに敏感になるのはなぜですか (そのような一般的なルールが存在する場合...)?

  3. ダン・セダーホルムの本は本当に防弾ですか...?

4

2 に答える 2

6

互換性を維持するには、どのくらい遡る必要がありますか?

つまり、IE7/8 をドロップできる場合は、css3 の丸みを帯びたコーナーを使用する必要があります。IE8/7 をサポートする必要がある場合は、グレースフルデグラデーションの使用を検討する必要があります。どこでも完璧を目指して努力するのは、おそらく時間と労力に見合う価値はありません。これは、ブラウザーが二度と更新されない場合には達成できない目標です。

1）これを引き起こしている可能性があるもの

それはかなり広い質問です。問題を再現できなかったか、Chrome 20（ベータ版）で実際に見つけられなかったので、混乱させる可能性のあるものをリストします。

  • 一般的なブラウザの丸めエラー、ブラウザは正確ではありません、正確なサブピクセルになるように設計されていません
  • px 値を他の値と混合すると、異なるラウディングによって値の合計が異なります。
  • ページ上の他のインフロー要素の影響を受けるインフロー要素の配置 (これらは通常、追跡するのが困難です)
  • 親要素のプロパティ (オーバーフローが隠されている固定サイズの親、たとえば、これは jsfiddle で問題になる可能性があると思います)
  • ブラウザのバグ
  • 上記の組み合わせ

この場合、jsfiddle には、「フルスクリーン」ビューであっても、ページ上にコンテナーとフレーム (オーバーフローが非表示、固定の高さ/幅、px ベースに設定されている) などのがらくたがあります。したがって、本当に確認したい場合は、自分のPCでhtmlファイルを作成して、それで開いてテストしてください。

2) 一般に、レイアウトをズームに敏感にするものは何ですか (そのような一般的なルールが存在する場合...)?

今日のブラウザーでは、ズーム機能が非常に高度であることが多く、フル ピクセル ベースのレイアウトを問題なくスケーリングできるため、これはそれほど重要ではない可能性があります。現在でも使用されている唯一の問題のあるブラウザーは IE7 です。IE7 のズーム機能はひどいので、テキストには % または em ベースの値のみを使用する必要があります。

「公式」に関連する唯一のガイドラインは、w3 アクセシビリティ ガイドライン/テクニックの記事であるWCAG 2.0にあります。

したがって、ブラウザーはスケーリングできます。最新のブラウザーはここでは問題ありませんが、正確になるように設計されていません。混合単位 (em、%、px) では不可能な作業でもあります。

3) Dan Cederholm の本は本当に防弾ですか?

ここで始める前に、私は本を読んだことがありません... 私は人生で CSS の本 (他の多くのリソース) を読んだことはありませんが、私の最初で最も重要なスキルはそれを夢見ることです。

「防弾とは？」から始めましょう。Web デザインの防弾とは、どこでも機能し、どこでも壊れないことを意味します。これだけでもヒントが得られるはずです。

彼がその本を書いたときは非常に防弾だったかもしれませんが、ウェブはダイナミックな場所であり、その本の最新の発表ブログ投稿を取ったとしても、それは昨年 12 月のものです。それ以来、少なくとも 3 つの新しい Chrome バージョン (概算) と、さらに多くの Firefox バージョンが登場しました。Microsoft は、今回は黙認していました (彼らが迅速なリリース スケジュールを実行することを決定した場合、私たちは大きな問題を抱えていたでしょう)。

それ以来、状況は変わり、新しいバグが間違いなく導入されました。

何が壊れているかに関係なく、ブラウザ間でわずかな違いはありますが、常に実現したいことに非常に非常に近いだけで、絶対的な証拠はありません.

それはそれがひどい本であるという意味ではありません.彼の履歴書を見ると、彼は間違いなくウェブデザインの第一人者であり、その分野の多くのことについておそらく正しい. なぜ物事が特定の方法で行われるのかを彼が説明してくれることを願っています.

A: "You always use EMs for text! EMs are annoying! Why do you do that anyway?!"
B: "I dunno, read somewhere I should..."
A: "Lets just use pixels! Pixels always work."
B: "Hmmm ok."

IE7 のサポートが失われました。（それが悪いことかどうかは別の議論です）

于 2012-06-19T17:44:36.280 に答える
5

まず第一に、あなたは背景画像を使用しています。

1）ええ、あなたの投稿の下のコメントで述べられているように、それは単にdivの丸め誤差であり、背景画像をトリミングします。

2）悲しいことにソースはありませんが、私の経験では、テキストを測定値として使用するオブジェクトはズームに敏感であり、画像は他のすべてに対してズームされない場合があり、事前に定義された「設定」サイズのコンテンツ（テキスト領域、ラジオボタン、等）。

3）何も防弾ではありません。特に、Webのように絶えず変化し、ブラウザによって動作が異なるものがある場合はなおさらです。貿易の危険。

于 2012-06-13T17:19:51.230 に答える