IE でサポートされていない 10 個の実用的で一般的に使用される CSS プロパティ

IE ブラウザ、特に IE6 に関する苦情は、基本的に麻痺状態に入っています。たとえ IE6 だけであっても、世界に 1 つのブラウザしか存在しなければいいのに、という非常に否定的な考えさえ抱くことがあります。もちろん、そのような考えは非常に病的ですので、すぐにやめてください。この記事では、非常に現実的であるものの IE でサポートされていない 10 個の CSS プロパティを紹介します。これらのプロパティを列挙することは IE を批判するものではありません (批判しても無駄です)。ただし、どの CSS プロパティが IE でサポートされていないのかを理解しておくとよいでしょう。 . 的を絞った方法でCSSとHackを書いてみましょう。

1.概要

CSS の問題をデバッグするとき、私は多くの場合、特定の要素に境界線を追加して、その要素に何が起こっているかを正確に確認し、問題の原因を特定するのに役立てます。これは、レイアウトをより具体的に表示できるため、多くの場合うまく機能します。しかし、それがブロックレベル要素の場合は、問題が発生する可能性があります。ブロックレベル要素に 1 ピクセルの境界線を追加すると、レイアウトに影響を与える可能性があり、要素の幅がさらに 2 ピクセル増加します。

アウトライン プロパティは、ドキュメントの流れに影響を与えることなくオブジェクトをレンダリングするため、完全な代替手段となります。ただし、IE6 と IE7 はアウトライン属性をサポートしていないため、これら 2 つのブラウザでのデバッグには使用できません。

2.(値)を継承

CSS 開発では、この例が数多くあります。特定の要素に特定のスタイルを設定して、その要素に親要素の追加プロパティをすべて「継承」するように指示することで、かなりの量のキーボード入力を回避できます。

これは、継承を設定することで簡単に実現できます。これは役に立つかもしれません。たとえば、背景属性をオーバーライドする場合、多くの場合、属性内に大量のテキスト (色、画像 URL、場所など) が含まれます。したがって、これらの値を書き換えるのではなく、問題の要素にその親と同じ背景プロパティを持たせるだけでよく、値を継承することでうまくいきます。明らかにキーボード入力の手間が大幅に節約されます。

残念ながら、IE6 および IE7 では、継承値はサポートされていません (方向 (テキスト方向) と可視性プロパティを除く)。

コードは女性のスカートのようなもので、短いほど良いと誰かが言いましたが、IE は私たちの願いの実現を妨げるようです。

3. 空のセル

この属性は、「display」属性が「table-cell」に設定されているテーブルまたは要素にのみ使用されます。表にコンテンツを動的に追加する場合、特定のセルのコンテンツが空で、この空のセルの境界線、背景色、背景画像などを非表示にしたくない状況が発生することがあります。

「空のセル: 非表示」を使用すると、この問題が発生する可能性のあるセルを完全に非表示にすることで、この問題を解決できます。

Internet Explorer は空のセル属性をサポートしていません。

4. キャプションサイド

テーブル属性について説明すると、この属性は、テーブルの横の列に表示されるテーブルのタイトルを宣言するために使用されます。上、下、左、右の 4 つの値を受け入れます。 Internet Exporer はこの属性をサポートしていません。IE6 および IE7 では、テーブル タイトルは常にテーブルの先頭に表示されます。

5. カウンタインクリメント/カウンタリセット

順序付きリスト (c34106e0b4e09414b63b2ea253ff83d6) は、手動で増加する数値を追加する手間を省き、数値を変更せずにリストの順序を変更できるため、非常に便利です。

CSS には counter-increment プロパティと counter-reset プロパティがあり、これを使用すると、順序付きリストと同様に、ほぼすべての HTML 要素に増加する数値を自動的に生成できます。

以下に例を示します:

h2 {counter-increment: headers;}
h2:before {content: counter(headers) ". ";}

上記のスタイルでは、すべての c1a436a314ed609750bd7c7d319db4da タグの前に増加する数字が自動的に追加され、h2 タグに対して li タグと同じ効果を実現できます。

ただし、IE6、IE7、さらには Safari (バージョン 3.x まで) はこれらのプロパティをサポートしていません。もちろん、IE6 は :before 疑似要素もサポートしません。

6. 最小身長

Web サイトのデザインやレイアウト構造では、高さが固定されたコンテンツ領域が必要になる場合があります。そうしないと、特定の視覚効果が失われます。これは、グラデーション背景、独自のドロップダウン リスト、または Photoshop からのクールなグロー効果が原因である可能性があります。ただし、ページ内に多くのコンテンツがあるにもかかわらず、ページを期待どおりに展開できない場合があります。

現時点では、 min-height 属性を使用する必要があります。これは、コンテンツの実際の高さがこの最小高さに達しているかどうかに関係なく、ブラウザーに特定のブロックレベル要素の最小高さをレンダリングするように指示できるためです。その後、コンテンツが最小高さを超える場合、要素は適切に拡張されます。

min-height の使用に関して注意すべき唯一の点は、min-height は IE6 ではサポートされていないことです。 IE6 が (ゆっくりと) 廃止されつつあることは誰もが知っていますが、一部の顧客は依然として自分のサイトでこのいまいましいブラウザをサポートすることを要求するかもしれません。

良いニュースは、IE6 は他のブラウザが「最小高さ」をレンダリングするのとまったく同じ方法で高さの値をレンダリングするため、必要なのは、特定の高さを追加するための IE6 固有のハックまたはスタンドアロンのスタイルシートだけであり、問​​題は解決されます。

IE6 は min-width 、 max-height 、 max-width も無視しますが、上記の方法はこれらのプロパティに対しても実行可能です。

7. :hover

从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用javascript。

但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如3499910bf9dac5ae3c52d5ede7383485标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。

8. Display

Display 通常被设置为这三个值中的一个： block、inline和 none。“得益于”IE，Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。

所以，尽管IE 确实支持Display的这三个基本属性，但是它基本上不支持其它属性。

其实，IE8对display的属性支持已经相当完整了。不过，对于inline-block属性，IE6/7只支持本身为inline的元素。

9. Clip

这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说，这个属性允许你在一个特定的元素上 指定隐藏区域——也可以理解为，在一个绝对定位的元素中，按照一定的设置来裁剪该元素的显示区域，超出该区域的内容会被隐藏掉。语法看起来像这样的：

p.clipped {
         padding: 20px;
         width: 400px;
         height: 400px;
         clip: rect(20px, 300px, 200px, 100px);
         position: absolute;
}

修剪只能用于一个绝对定位的元素，而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域，该区域以外的内容不可见或者被剪切掉。

技术上来讲， clip 属性被IE支持，但是只支持无逗号的语法，比如

p.clipped {
	padding: 20px;
	width: 400px;
	height: 400px;
	clip: rect(20px 300px 200px 100px);
	position: absolute;
}

上面的样式（rect后面括号里的属性没有用逗号隔开）在大多数浏览器下都可运行，但是可能不会通过CSS验证，因为语句没有用逗号隔开。

10. :focus

这是另外一个伪类需要在这里被提及的，因为所有的非IE浏览器，都支持这个属性。:focus伪类允许你声明一个特别的样式，当一个页面元素成为键 盘(鼠标)焦点的时候，将该样式动态的应用到该元素上。这在表单元素上非常有用，因为你可以在一个输入框被选中的时候给它添加一个边框。

下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框：

input:focus {
        border: 1px solid #f00;
}

               

以上がIE でサポートされていない 10 個の実用的で一般的に使用される CSS プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。