Safari WindowsとSafari MacではWebサイトの見た目がどのように違うのですか？

Question

私はウェブサイトを持っています。私は自分のWindows PCでクロスブラウザをテストしてきましたが、すべてのブラウザで問題ありませんが、MacのSafariでは、CSSが正しく解釈されていないか、重大なJavaScriptエラーが発生しています。

コンソールのクロスブラウザを見ると、エラーログはまったく同じです。 Chrome Macではサイトが意図したとおりに解釈されるので、なぜSafariに問題があるのですか？

異なるコンピュータ間でも同じで、iphone safariでもサイトが正しく表示されません。

これはどのようにして可能で、どのようにデバッグできますか？

Ivaylo Slavov · Accepted Answer

私は、その方向での自分自身の経験（および努力）に基づいて、視覚的な違いを提供するブラウザーの基本的な手がかりを求めようとします。

The fonts.ブラウザは（font-family cssプロパティを介して）フォントを使用してページにテキストを表示します。これらのフォントのほとんどはオペレーティングシステムに由来しているため、以下にその問題の簡単なリストを示します。
- 異なるオペレーティングシステムには異なるフォントファミリがプリインストールされており、特定のフォントが見つからない場合、無音で置換されます。さらに、置換に使用されるフォントは、OSに固有であり、その特定のOSにのみ固有である場合があります。
- たとえば、sizeが10pxの特定のフォントは、別のオペレーティングシステムの同じ10pxサイズのフォントと同じように大きくまたは小さく見えます。
- フォントの外観は、clear typeエフェクトによっても決まります。これは、オペレーティングシステムによってサポートされる方法が異なります。この機能は、デフォルトでは無効になっているか、一部のOSではまったく使用できない場合があります。たとえば、Windows XPは無効になっていますが、Windowsの以前のバージョンでは、私の知る限り、まったくサポートしていません。XPでは、ブラウザに対してのみクリアタイプを有効にすることもできます。、IE7以上を使用している場合、OS全体ではありません。クリアタイプがないと、フォントがピクセル化されて見えるため、クリアタイプが有効なバージョンとはかなり異なります。さらに、クリアタイプ自体を微調整できます。見栄えを良くするために、個人の設定によってもテキストのルックアンドフィールにわずかな違いが生じる場合があります。
レンダリングエンジン。ブラウザは、独自のエンジンを使用してWebサイトを表示し、レンダリングエンジンと呼ばれるスクリプトを実行します。現在最も人気のあるブラウザーには、レンダリングエンジンが付属していますそれぞれのブラウザー：
- Tridentは[〜＃〜] ie [〜＃〜]によって使用されます
- GeckoはFirefoxによって使用されます
- WebKitはSafariおよびChromeで使用されますそれでも、ページのレンダリングが異なります。
- Prestoは、Operaが同梱されていたエンジンですが、WebKit。
各レンダリングエンジンは、デバイス/オペレーティングシステムによって動作が異なる場合があります。 Chromeたとえば、クロスプラットフォームのブラウザであるため、WindowsとLinuxのような異なるOS-esでは、両方のOS-esが同じバージョンのブラウザを使用している場合でも、多少の違いが見られる場合があります（trueスクリプトの動作条件）。
ブラウザのバージョン。ブラウザのバージョンは、もう1つ重要な点です。なぜ、あなたは尋ねるかもしれません。ここにあります：
- ブラウザが進化するにつれて、それらはindependentlyであり、レンダリングエンジン用のindividual patchを使用して新しいバージョンを導入しています。したがって、SafariのWebKitの最新のパッチは、Chromeの最新のWebKitバージョンとは異なる可能性があります。
- 特定のブラウザによっては、以前のバージョンと現在のバージョンの間でページの表示に影響する変更が生じる可能性があります。たとえば、MicrosoftはTridentエンジンの多くの機能を廃止しているため、一部のIE7表示トリックとスクリプトは新しいIE11では動作しなくなります。
- Operaの場合と同様に、更新により、レンダリングエンジン全体を置き換える変更が導入される可能性があります。
クライアントオペレーティングシステム。フォントとクリアタイプの効果に加えて、一部のHTML要素の基本スタイルは、オペレーティングシステムの外観とテーマによって提供されます。 MichaelTの答え。通常、これはページのスタイルでオーバーライドされない場合、ボタン、コンボボックス、スクロールバー、ラジオボタン、チェックボックスの外観に影響します。 IE6などの古いブラウザーは、これらのUIコンポーネントの再スタイル設定をサポートしていない可能性があり、OSテーマがどのように表示されるかに見えます。
ブラウザ固有のコード、ハッキングまたはなりすまし。最後に、ただし少なくともはブラウザ固有のハッキング。これは、css、javascript、およびhtmlで確認できるプラクティスです。これらは、ブラウザー固有の問題を克服するためにWeb開発者とデザイナーによって行われ、誤って、または意図的にのいずれかで表示の違いを引き起こす可能性があります。質問の下の first comment で述べたように、開発者またはユーザーは、故意に自分のブラウザーを別のブラウザーとして識別させる場合があります。通常、開発者は、デスクトップPCで作業しているときにモバイルブラウザーで表示した場合のWebサイトの外観をテストするのが慣例です。一部のブラウザーには、他の既知のブラウザーとして自分自身を再識別できるプラグインがあります。

上記のすべてを組み合わせると、ページの外観（でさえ動作する可能性があります！）をデバイス、OSに応じて異なるようにする可能性がある非常に包括的で幅広い要素が得られます、ブラウザ、ブラウザのバージョン、およびページ自体のソースコード。そして、私はすべての可能性を使い果たすふりをしていません。

user40980 · Answer

最初の考慮事項は、同じブラウザの異なるバージョンが異なるレンダリングバックエンドバージョン（Safariの場合はWebkit）を持っている可能性があることです。

ウィキペディアの Safariバージョン履歴を見ると、5.1.7がwebkitバージョン534.57.2を使用していることがわかります。一方、Mac OSX Safariは、OS 10.9の7.0と、10.8の最新バージョンの6.1を実行しています。 Appleは更新をプッシュするのに妥当な役割を果たします。Safari7.0はWebkit 537.71を実行しており、6.1はWebkit 537.43.58を実行しています。これらはすべて異なるバージョンであり、レンダリングにいくつかの違いがある可能性があります。

次の考慮事項は、ブラウザが使用するウィンドウウィジェットがオペレーティングシステムによって異なることです。 LinuxでChrome（最新））がレンダリングされるという問題が最近発生しました<select>一方向のリストを表示し、Chrome（最新）のMac OS Xでは、レンダリングが異なります。異なるウィンドウウィジェット。

CSS で単一選択メニューコントロールオプショングループ（optgroup要素）をスタイリングすることで、このさまざまなウィジェットのアイデアを得ることができます

これは実際には、サポートされているすべてのブラウザーとオペレーティングシステムを個別のエンティティとしてテストし、そのようにデバッグする必要があるということになります。異なるオペレーティングシステムの「同じ」ブラウザは同じではありません。

行うことは、使用しているChromeのバージョン、使用しているWebkitのバージョン（Webkitを使用している場合））を確認し、 webkit （および trac.webkit.org ）のログを変更します。 WindowsとMacの両方で一貫したバージョンのWebkitをビルドして、コードで問題が見つかるかどうかを確認します。見つからない場合は、Webkitの問題をログに記録します。実際に [〜＃〜] sscce [〜＃〜] バージョンから作業する-自分自身のために、そして誰かがそれを調べて修正することを望む場合。