css互換ieの書き方-フロントエンドQ&A-php.cn

css互換ieの書き方

WBOY

リリース： 2023-05-21 11:47:06

オリジナル

788 人が閲覧しました

CSS はフロントエンド開発における重要なスキルの 1 つですが、ブラウザーによって CSS の解析とサポートが異なる場合があり、特に IE ブラウザーでは、この違いがより顕著になります。 Web サイトが IE ブラウザーで正しく表示されるようにするには、IE の CSS の互換性の問題を理解する必要があります。この記事では、開発者がこの問題を解決できるように、IE と互換性のある一般的な CSS 記述方法をいくつか紹介します。

セレクターの互換性の問題

IE には、特定の CSS セレクターのサポートに問題があります。たとえば、CSS3 の疑似クラスセレクター nth-child() は、IE7 以前では正しく解析できません。また、IE 6 以前では、項目を選択するための「」および「~」セレクターの使用がサポートされていません。同じレベルの要素。したがって、IE で正しく表示するには、JavaScript を使用してこれらのセレクター効果を実現するか、CSS でフォールバックセレクターを使用することができます。

例:

/* IE6以及以下版本中是无法识别"+"和"~"选择器的 */
ul li + li {
  margin-left: 20px; /* 应用于选择器后方的li元素 */
}
ul li ~ li {
  padding-left: 10px; /* 应用于紧接着选择器后方的所有li元素 */
}
/* IE6及以下版本中的回退选择器 */
ul li { margin: 0; }
ul li:first-child { margin-left: 20px; }
ul li:last-child { margin-right: 20px; }

ログイン後にコピー

幅のパーセンテージの互換性の問題

IE6 では、要素の幅がパーセンテージで設定されている場合、その要素の幅がパーセンテージで設定されている場合、親要素が幅もパーセントで設定されている場合、要素の幅が異常になる可能性があります。この問題を解決するには、親要素に「display:inline-block」を設定し、その幅を 100% に設定します。

例:

/* 在IE6中,当父元素宽度为百分比时,子元素百分比宽度会出现问题 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
  /* 在IE6中,需要在父元素上设置display:inline-block */
  display:inline-block;
}
/* 为了在其他浏览器中保持和IE同样的效果 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
}

ログイン後にコピー

絶対配置の互換性の問題

IE では、絶対配置の要素の配置は、常にそれに最も近い要素を基準にしているわけではありません。親要素を、場合によっては body 要素に対して相対的に配置します。この問題を解決するには、親要素に「position:relative」を設定します。

例:

/* 在IE中，绝对定位元素可能会相对于body元素定位 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

ログイン後にコピー

フローティングの互換性の問題を解決する

IE では、フローティング要素は親要素に高さを強制しません。多くのレイアウトの問題。したがって、フロートをクリアする必要があります。一般的な方法は、親要素の末尾に空の要素を追加し、それを「clear:both」に設定することですが、この方法は IE では常に機能するとは限りません。この問題を解決するにはいくつかの方法があります。その 1 つは、フローティング要素の親要素に「overflow:hidden」を追加して、強制的に高さを占有するようにすることです。

例:

/* 在IE中，浮动元素不强制父元素占有高度 */
.parent {
  overflow: hidden;
  zoom: 1; /* 用于激活IE6和IE7中的hasLayout */
}
.child {
  float: left;
  width: 50%;
}

ログイン後にコピー

背景の透明度の互換性の問題

IE では、要素に背景が設定され、透明度 (不透明度) が設定されている場合、要素のテキストとサブ要素も透明になります。この問題を解決するには、IE 独自のフィルターメソッドを使用して透明度を追加します。

例:

/* 在IE中，设置背景透明度会影响元素文本和子元素 */
.parent {
  background-color: #000;
  opacity: 0.5;
  /* 在IE中，使用滤镜来添加透明度 */
  filter: alpha(opacity=50);
}

ログイン後にコピー

境界モデルの互換性の問題

IE6 以下のバージョンでは、W3C 仕様とは異なる「IE ボックスモデル」が使用されます。。つまり、IE で要素の幅を設定すると、その実際の幅は、ボーダー、パディング、コンテンツの幅の合計を計算して直接計算された値よりも大きくなります。 IE で境界線を正しく処理するには、CSS のハックまたは JavaScript の特別な計算を使用できます。

例:

/* 在IE6及以下版本中，应该将width宽度设置成.content的宽度 */
.box {
  width: 400px;
  height: 300px;
  padding: 10px;
  /* 在IE6及以下版本中，边框和内边距会导致元素实际宽度增加 */
  border: 1px solid #000;
  background-color: #fff;
}
/* 在其他浏览器中，边框和内边距不会导致元素实际宽度增加 */
.box {
  width: 422px;
  height: 322px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

ログイン後にコピー

リンクの背景色の互換性の問題

IE でリンクの背景色を設定するときに、リンクがアクティブなステータスである場合または訪問済みステータスの場合、背景色は有効になりません。この問題を解決するには、アクティブなスタイルと訪問済みのスタイルを手動でリンクに追加します。

例:

/* 在IE中设置链接背景色需要同时设置活动和已访问状态，否则会失效 */
a {
  background-color: #f00;
}
a:visited,
a:hover,
a:active {
  background-color: #f00;
}

ログイン後にコピー

概要

上記は、IE と互換性のある CSS の一般的な記述方法です。もちろん、実際にはさらに多くの互換性の問題が発生する可能性があり、継続的なテストと解決の試みが必要になります。 IE との互換性を確保するプロセスは面倒かもしれませんが、これは少なくとも理解して習得する必要があるスキルの 1 つです。実際には、IE ブラウザは、特に一部の古いエンタープライズ環境において依然として一定の市場シェアを持っているからです。

以上がcss互換ieの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。