CSS Hack に関して、現在のブラウザ互換性に関するいくつかの問題_html/css_WEB-ITnose

この記事では IE6 との互換性は考慮されていません

私はフロントエンドのインターンです。働き始めて間もなく、多数の CSS 互換性を必要とする非常に緊急のプロジェクトに遭遇しました。私が独学で CSS Hack をいじっていたとき、ビジネスの状況がこれほど複雑になるとは予想していませんでした。作業量が少し重いのと、会社にフロントエンドが 1 つしかないため...これまで学んだ内容が標準化されておらず、十分に明確ではなく、潜在的な問題を引き起こすのではないかと心配し、メモを整理していたとき急いで調べたところ、このような CSS Hack のチュートリアルは少し古く、IE9 以降はほとんど更新されていないことがインターネット上にたくさんあることがわかりました。そのため、今日はアドバイスを求めにここに来ました。

まず、以前勉強していたとき、ブラウザの互換性を Firefox 標準、Chrome 標準、IE7 標準に分けていました。通常であれば、IE7 (またはほとんどの IE バージョン) に適した CSS を書きます。 name{}）、次に Firefox（@-moz-document url-prefix(){.name{}}）または Chrome（@media screen および (-webkit-min-device-pixel-ratio:0) { .name{}}) を調整して

1. 一般的なネチズンのブラウザ使用状況に基づいて、私のディストリビューション互換性スキームと CSS Hack の記述方法は妥当ですか?それが不合理である場合、それをどのように配布し、統一された方法で記述する必要がありますか？

同じウェブページの長さが ul であることも発見しました。私の Windows10 + IE11 では幅を 215px に設定しましたが、管理者の Windows7 + IE11 では 20px 短くなります。IE のバージョンは 11.192 です。管理者の IE バージョンは 11.0、更新バージョンは 11.0.29 ということは、IE11 にはバージョンがたくさんあるということでしょうか。 2. この状況にどう対処しますか?

アドバイスありがとうございます!

ディスカッションへの返信(解決策)

1．実践は真の知識をもたらします。そのような効果を達成できるかどうかを確認するには、さまざまな環境をシミュレートするしかありません。

2. 私はそのような状況に遭遇したことはありませんが、マネージャーのブラウザーが拡大または縮小しているかどうかを確認できます。以前同じような状況に遭遇しましたが、フォントサイズは大きくなりましたが、結果としてタイトルが折り返されました。その後、原因がわかりませんでした。ブラウザは 110% に拡大されました。復元後、すべてが復元されました。

1. 実践によって真の知識が得られます。そのような効果が得られるかどうかを確認するには、さまざまな環境をシミュレートする必要があります。

2. 私はそのような状況に遭遇したことはありませんが... 管理者のブラウザが拡大または縮小されたかどうかを確認できます。私は以前同じような状況に遭遇しました。フォントサイズは大きくなりましたが、表の幅は変わりませんでした。結果、タイトルが改行になりましたが、原因が分かりませんでしたので見てみると、回復後は正常に表示されました。

さまざまなブラウザの環境をシミュレートするために使用できるものを聞きたいです。 1 つずつダウンロードするのは本当に面倒です。

2 つ目。以前のダウンロードを行った人が余分な li を追加したことがわかりました。その後、私の IE11 では、この li はスペースを占有しませんでしたが、マネージャーの IE では、実際には少しスペースを占有し、 ul 全体が上がったため、20ピクセル長くなりました。

CSS リセットを検索します。 通常の状況では、新しい CSS プロパティを比較する必要がない場合は、自分で Hack を記述する必要はありません。または、CSS フレームワークを使用して確認してください。

各種ブラウザの環境をシミュレートできるものを知りたい

各種ブラウザの環境をシミュレートできるものを知りたい

まず、いくつかのブラウザをインストールします。次に、IE、Chrome、Firefox、Safari など、一般的に使用されるいくつかのブラウザには基本的に F12 ツールが含まれています。これらのブラウザはさまざまなバージョンをシミュレートすることもできるので、それを探すことができます

IE texter を使用してデバッグすると、各ブラウザの違いがわかります

IE texter を使用してデバッグします デバッグこうすることで、各ブラウザの違いがわかります

このイベントを今すぐ書き直したいのですが、解決してもらえますか?
[http://bbs.csdn.net/ トピック] /391930703?page=1#post-401040430]

互換性の問題に優先順位を付け、最も重要なものをリストする必要があります。