IE8+ 互換エクスペリエンスの概要_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

IE8+ 互換エクスペリエンスの概要_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

最近、私は Flask+Bootstrap3 フレームワークの組み合わせを開発に使用しています。この記事は、IE8 以降の互換性の問題に対する解決策を共有するためのテクノロジーの組み合わせに基づいています。私の実務経験によれば、W3C が推奨する方法に従って HTML/CSS を記述し、以下の点に注意すれば、IE8+ の互換性問題の大部分は基本的には大丈夫です (ここでいう主な IE8+ とは、IE8+ のことを指します) IE8。個人的な目視によると、IE9+ のレンダリング効果はすでに非常に優れています)。

事前準備

IE の互換性をテストするには、Windows でテストする必要があります。Win7+ でなければなりません。WinXP は最大でも IE8 しかサポートせず、IE9 はハハハとなるからです。ほとんどの Web 開発者は、開発環境として Windows を使用せず、Linux ディストリビューションまたは Mac OS を使用します。何をするか？一般に 2 つの方法があります:

Windows 仮想マシンを開く

開発環境を一時的に Windows に切り替える

マシンが十分に速い場合は、前者の方法をお勧めします。しかし、私は中古のコンピューターで開発しており、仮想マシンを開くときに非常に固まってしまったので、2 番目の方法を採用しました。 Python を使用している場合は、以前に書いたブログ「Windows での Python Web 開発環境の構築」が役立つかもしれません。

次に、Win7 でテスト用のブラウザをインストールする必要があります。先月 Baidu が提供したブラウザのシェアを確認しましたが、それが正確かどうかはわかりません:

おそらくテストされたのは、IE11、IETester (IE8-IE9)、360 ブラウザ、Sogou ブラウザ、Chrome、Firefox、Safari for Windows です。 IETester テスト後は、念のため、実際の IE8 および IE9 で再度テストすることをお勧めします。 Safari は Apple デバイスで最もよくテストされています。

DOCTYPE

まず、HTML ページの先頭に DOCTYPE 宣言があることを確認する必要があります。 DOCTYPE はブラウザに HTML の種類を伝えます。ブラウザによる CSS コード、さらには JavaScript スクリプトの解析も非常に重要です。現在のベストプラクティスは、HTML ドキュメントの最初の行に次のように入力することです。 DOCTYPE の具体的な説明については、「DOCTYPE の正しい使い方」、「CS002: DOCTYPE とブラウザモードの分析」を参照してください。

メタタグを使用してブラウザのレンダリング方法を調整します

IE8 には「互換表示」の概念があり、IE8 がリリースされたとき、IE6/7 と比較して大幅に改善されましたが、古いサイトの多くは IE6/7 のみを対象としていました。が最適化されているため、IE8 を使用したレンダリングは混乱します。これらの勤勉なフロントエンドエンジニアの世話をするために、IE8 には「互換表示」機能が追加され、IE6 または IE7 のカーネルを使用して IE8 でページをレンダリングできるようになりました。もちろん、これは私たちが望んでいることではないので、メタタグを使用して、IE8 に最新のカーネルを使用してページをレンダリングするように強制する必要があります。コードは次のとおりです。

<!DOCTYPE html>

IE=edge は、 IE の最新カーネルである chrome=1 は、IE6 がインストールされている /7/8 およびその他のバージョンのブラウザプラグイン Google Chrome Frame (ユーザーのブラウザに IE のメニューとインターフェイスを引き続き持たせることができますが、ユーザーがWeb では、実際には Chrome ブラウザコアを使用します)、Chrome カーネルを使用してレンダリングします。このメタタグの具体的な手順については、StackOverflow のこの優れた回答を参照してください。

中国には 360 Browser や Sogou Browser などのデュアルコアブラウザが多数ありますが、特定のページのレンダリングにどのカーネルを使用するかをどのように決定するのでしょうか?以下は 360 ブラウザ v6 の新機能の公式説明です:

よく知られている状況により、国内の主流のブラウザはデュアルコアブラウザです: 一般的に使用される Web サイトを高速に閲覧するための Webkit カーネルに基づいています。 IE ベースのカーネルは、オンラインバンキングや古いバージョンの Web サイトと互換性を保つために使用されます。いくつかの 360 ブラウザを例に挙げると、Webkit カーネルを介して主流の Web サイトをレンダリングすることを優先し、ページの互換性を確保するために IE カーネルを介してレンダリングされる Web サイトは少数です。従来、当社では長期間の手作業で収集した数百キロバイト規模のURLライブラリを管理する方法が主流でした。

当社では、ユーザーからのフィードバックとコードタグのインテリジェント判断技術を通じて、ブラウザの自動カット精度の向上に努めています。しかし、多くの場合、まだ 100% 正確に理解することはできません。そこで、新しい制御方法としてカーネル制御メタタグを追加しました。ウェブサイトにメタタグを追加し、この URL のレンダリングにどのコアを使用するかを 360 ブラウザに指示している限り、360 ブラウザはこのタグを読み取った後、対応するコアにすぐに切り替わります。そして、この動作を、この第 2 レベルのドメイン名の下にあるすべての URL に適用します。

ソリューション 360 では、メタタグを通じて Webkit を使用することが推奨されているとのことです。コードは次のとおりです。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

詳細な調査は行っていないため、他のデュアルコアブラウザがこれをサポートしているかどうかはわかりません。特徴。

Media Query

Bootstrap3中使用了大量的Media Query特性，但是IE8似乎无法识别，所以需要hack一下啦！Bootstrap3的官方文档中已经针对浏览器兼容性做了比较详细的说明，推荐采用Respond.js解决此问题，具体方法参见它的文档即可。

有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如.container）进行覆盖，那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important。

实现CSS3的某些特性

IE8不支持CSS3的很多新特性，不过我们可以使用一些比较成熟的hack方法，我采用的是CSS3 PIE，它支持的特性有这些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

官方文档给出了2种使用方式，一种是引入.htc文件，另一种则是使用PIE.js。如果使用第一种方法（官方推荐），那么需要设置.htc文件的Content-Type为text/x-component。这个也好办，如果你是通过nginx来托管此文件，只要在Nginx的配置文件中加入一条MIME规则即可。我建议使用Flask来托管它（放在static文件夹中），这样更方便，然后只需加入下面的代码：

import mimetypes mimetypes.add_type('text/x-component', '.htc')

特别注意：请一定阅读CSS PIE给出的Know Issues。

识别HTML5元素

如果你在前端代码中使用了HTML5的新标签（nav/footer等），那么在IE中这些标签可能无法正常显示。我使用html5shiv，具体使用方法见文档。

关于max-width

还有一个在IE8中经常遇到的问题就是max-width，网页中图片的尺寸可能比较宽，我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度，但是有时候却不奏效，慢慢摸索才得知IE解析max-width所遵循的规则：严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些，所以这个问题应该不归属为IE兼容性问题，不过我还是提一下吧。分享两个我遇到的场景：

（1）td中的max-width

如果针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed，对此属性的具体解释见W3School。

（2）嵌套标签中的max-width

如下的HTML结构：

<div class="work-item"> <a href="#" class="work-link"> <img  class="work-image img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="sample.jpg"  alt="IE8+ 互換エクスペリエンスの概要_html/css_WEB-ITnose" > </a> </div>

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。

嵌套inline-block下padding元素重叠

HTML代码：

<ul>    <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> </ul>

CSS代码：

ul li{ display: inline-block; } ul li a{ display: inline-block; padding: 10px 15px; }

按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。这里和这里也提到了同样的问题。我的解决方法是使用float: left替代display: inline-block实现水平布局。

placeholder

IE8下不支持HTML5属性placeholder，不过为解决此问题的js插件挺多的，比如：jquery-placeholder。

last-child

first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账。推荐的做法不是使用last-child，而是给最后一个元素设置一个.last的class，然后对此进行样式设置，这样就全部兼容了。

background-size: cover

如果你想使用background-size: cover设置全屏背景，很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了。

还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

filter blur

CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果的blur（类似iOS7的效果）：

filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px);

IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊，要想支持高斯模糊，需要如下设置：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在实践中发现一个坑就是，所有position: relative的元素都不会生效。

其他的发现是，IE9对filter: blur(10px)无效，而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是针对元素小范围的模糊效果。IE11对两种写法好像都无感。IE10则没有测试。

さて、これまでに私が遭遇した IE8+ 互換性の問題はすべてです。フロントエンドもバックエンドも少しずつやっているので、一人でWebサイトを開発できるのがメリットですが、全ての面で苦手なのがデメリットです。重要な追加事項やより良い解決策があれば、ぜひお知らせください。

追記: 最近、IE7 との互換性についていくつかの作業を行いました。関連する経験については、「IE7+ の互換性」を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、