Safariでのスタイリングの問題

Question

私はChrome、Firefox、IEでほとんどのテストを行っていますが、少し時間の間ウェブサイトで作業しています。私は物事をラップしているので、私はSafari（Mac、iPad、iPhone）でそれを試してみました。私は、特定の要素がSafariに間違って配置されていることに気付きました。私はCSSを試してみましたが、運がありませんでした。

ページはここで見ることができます - http://staging.princewebdesigns.com/gallais/

は、具体的には、ロゴ（バナーに押し下げされている）、バナー内のキャッチフレーズのフォント（バナーを越えてラッピングし、左にすぎ延びる）を参照してください。 、「Featured Work」のタイトルの折り返し、プロジェクトの名前の折り返し、およびフッターの折り返し。 http://staging.princewebdesigns.com/gallais/images/chrome.png

をすべてのヘルプは高く評価されています.../iphone.png

に上記のリンクを変更する、それが私のiPhone上でどのように見えるかを確認するには - ここで

は、ページがどのように見えるべきかです。

Answer 1

問題は、ズームインブラウザのテキストを持っていること（と思う）である。

私は、Mac OS 10.7.3上のSafari 5.1にページをロードし、それが最初に罰金ロード。私が通常ズームしたとき、レイアウトはそのまま残っていました。私がテキストだけをズームしようとすると、あなたの説明ごとにレイアウトが壊れました。

言われているように、ユーザーがテキストサイズを大きくした場合にレイアウトをより柔軟にする方法を考えるのがよいかもしれません。たとえば、IEでは、デフォルトのズームは全面ズームですが、ユーザーはズームとは別にテキストサイズを大きくすることができます。これらの状況でレイアウトをテストして、完全に脱線しないことを確認する価値があります。私はそれが完璧でなければならないと言っているわけではありませんが、まだ判読できます。

1つのアイデアは、さまざまなユニットを試してみることです。私は、相対測定を使用して水平長さ（例：余白 - 左）を宣言するときに、ピクセル測定を使用して垂直の長さ（たとえば、マージントップ）を宣言すると、サイトロゴのような超重視のアイテムの場合、positon：absoluteは試してみると良いルートかもしれません。