ホームページ  >  記事  >  ウェブフロントエンド  >  IE8+ 互換エクスペリエンスの概要_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:41:551062ブラウズ

最近、私は 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 src="sample.jpg" class="work-image img-responsive"> </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 までご連絡ください。