発生したブラウザ互換性の問題とその対処方法-htmlチュートリアル-php.cn

序文:

先週の日曜日に先輩から3ページ作るのを手伝ってほしいと頼まれ、データのやり取りなどはなく、ずっと何も作っていなかったのですが、簡単なフロントエンドページでした。読むのに疲れたので、練習だと思って引き受けました。これまで体系的に本を読んだことがなかったので、実際には多くの問題を包括的に検討することができず、何が起こっているのかはわかっているが、なぜそうなっているのかはわからないという状態でした。学ぶべきことはまだたくさんありますが、自分の欠点を知っていることは良いことです。知らないよりはいいですよね？そして、これは進歩とみなされるのでしょうか?つまり、さまざまな問題に遭遇したとき、その問題は主に 2 つのカテゴリーに分けられることがわかります。 1 つ目は、自分のことを十分に理解していないため、解決方法がわからないことです。 Du Niang またはマスターに尋ねる; 2: 現在のテクノロジーに抜け穴があるものは、まだ実装されていないか、実装されたが曖昧さや矛盾があるかに関係なく、このリストに含まれます。今回作成したページに関して、私が遭遇した最大の問題はブラウザの互換性でした。解決策があればここで共有したいと思います。また、より多くの知識を得ることができれば幸いです。

テキスト:

1. 問題が発生しました: 現在のブラウザは ie7 以前です

解決策: ユーザーが通常のページに表示されるコンテンツを見られないように、div で覆います

実装方法: 通常コンテンツを表示する div の表示属性を none に設定し、カバーする div の表示属性を block に設定します (追記: ブラウザのダウンロード リンクを追加して、ユーザーがページを閲覧できるようにすることもできます)通常はできるだけ早く)

2. 問題が発生しました:ie8 は css3 を十分にサポートしていないため、ie8 では角丸を実装できません

解決策: PIE をダウンロードして、IE8 が CSS3 の角丸をサポートするようにします

実装方法: 実装方法についてはここでは詳しく説明しません。それをダウンロードして、「behavior: url(path/PIE.htc);」にアクセスするようにパスを変更します。注意が必要な点:

(1) この参照は HTML ファイルに配置する必要があり、パスは参照先の HTML ファイルに対する相対パスです。CSS ファイルに配置しても効果はありません。

(2) 参照が成功した後、角を丸くする必要があるオブジェクトが消えていることがわかったら、四角くならないで、シャワーを浴びて出て、個人テスト

冗談ですが、シャワーを浴びたのですが表示されなかったので、神に祈っても無駄でした（両手を広げて） に行きました。 Baidu をもう一度調べてみると、問題は z-index にありましたが、z-index を 1 つだけ設定しても効果がないことがわかりました。これはデフォルト値です。 IE8で完璧な角丸が実現しました～（PIEを書いてくださったエンジニアの方々に心より感謝申し上げます。カンサンさん、私が望んでいた効果をこれほど簡単に実現できたのは本当にあなたの努力のおかげです）アミダ〜)

3. 問題が発生しました: まだ IE8 なので、CSS3 で @media screen と (....) をサポートしてレスポンシブ レイアウトを実装できません

解決策: まさか、迷惑な小さなゴブリンにしたのは誰ですか? (肩をすくめ) 画面の幅を取得するために別の js ファイルを作成し、対応するスタイルを個別に追加します

実装方法: " うまくいきませんでした ！これは自尊心を傷つける行為です。その後、「ie9」と「>」の間に余分なスペースがあることが原因であることがわかりました。

（手動さようなら）。ただ、バグを直した後の達成感はこのためだとわかっているので、「まず100回くらい自殺したくなる」という感じです。

以下に js コードを掲載します。実際、原理は非常に簡単です。主に、innerWidth と clientWidth の間にはいくつかの小さな違いがあります。質問がある場合は、インターネット上で専門家による詳細な分析が多数あります。

/* 用于兼容ie8实现不同宽度窗口的响应式布局 */ function getWidthHeight(){ var wWidth,wHeight; // 获取窗口宽度 if (window.innerWidth){ wWidth = window.innerWidth;

} else if (document.body && document.body.clientWidth){ wWidth = document.body.clientWidth; } // 获取窗口高度 if (window.innerHeight){ wHeight = window.innerHeight; } else if (document.body && document.body.clientHeight){ wHeight = document.body.clientHeight; } // 通过深入Document内部对body进行检测，获取窗口大小 if (window.documentElement && window.documentElement.clientWidth && window.documentElement.clientHeight){ wWidth = window.documentElement.clientWidth; wHeight = window.documentElement.clientHeight; }

return {"wWidth":wWidth,"wHeight" :wHeight}; }

$(document).ready( function (){ var wWidth = getWidthHeight().wWidth; if (wWidth ){ $( "body").css("font-size","5px" ); } else if (wWidth > 900 && wWidth ){ $( "body").css("font-size","8px" ); } else if (wWidth > 1200 ){ $( "body").css("font-size","10px" ); } }); ログイン後にコピー 4.遇到问题：在ie11之前的版本，如果 在 标签中，则会出现奇怪的蓝色边框

实现方法：给 加一个“border:0;”绝对立竿见影

5.遇到问题：因为是前台首页，所以写了图片滚动，ie10以下图片莫名出现多余空隙

实现方法：给 加一句“display:block;”效果卓越

6.遇到问题：竖向显示的文字用了“writing-mode:tb-rl;”但是在去朋友的电脑上调时发现居然在我心爱的FF上没效果，不可能啊？？？然后发现是因为FF4及以下版本没有实现这个属性，这个属性最初是 由ie想出来的（老实说，我当时有点意外呢，毕竟ie在我心中是个孤僻的天才，属于自己搞点小发明但是都属于破坏向的，所以居然这么好用的属性是被ie想出来的，而且FF居然要到了后来才 实现，不得不说对于我是挺意外的）

解决思路：没法，有问题就得想办法解决，那就只能一句一句的用ul li嵌套，然后向右浮动，设置定宽来实现了（老实说在用过writing-mode后这个方法很傻而且效果不好）

实现方法：思路说了，那就直接上代码。

//html部分 ログイン後にコピー //这里的 是为了让标点也能够重起一行 ul > li > 天气真好 br > ，天气真好 br > 。 li > li > 天气真好 br > 。 li > li > 天气真好 br > ，天气真好 br > 。 li > li > 天气真好 br > ？天气真好 br > ； li > li > 天气真好 br > ？ li > ul > ログイン後にコピー //css部分 ul { width : 6em ; //em是一个相对单位，比px更好，1em = font-size的大小（如果没有设置font-size则由继承值决定） overflow : hidden ; //保证布局不会崩掉 list-style : none ; //把默认样式去除 } ul li { float : right ; //实现从右向左布局 width : 1em ; //定宽保证只显示一个字 margin-left : 0.2em ; //保证每个li包含的内容之间有一定的间隔，能够看清楚 word-break : break-word ; //告诉浏览器每个字后自动换行 } ログイン後にコピー 以上就是我调兼容性遇到的问题啦，以下就是我之前说的那两类问题，即我能力有限所以遇到的问题，还有就是现存的没有办法解决的问题

一：这个问题归根结底就两字： 浮动 ！（必须任性给它加粗加底线）不论是莫名其妙的这个div就跑到后面去啦；哎，你这个img跟着上面的导航的布局跑什么跑；喂喂，这个p标签怎么这么不负责任呢？和你一起的img都乖乖在下面呆着，你跑到上面这个div里面的p标签旁边是要搞什么，搞基嘛？好吧，我承认这个锅说到底还是要自己背，因为浮动确实很强大，但是用不好会真的有很奇怪的结果出现。所以啊，好好看书吧，在这里骂这些标签或者浏览器感觉它们也挺无辜的。

二：（1）因为要异步加载文件进来，所以用到了JQuery的load方法，但是在谷歌浏览器上面是禁止的，没有办法调但是换到服务器上就好了，同样的还有360也是这样的

（2）谷歌中不能设置font-size小于12px，这是谷歌的BUG存在挺久的了，虽然不知道为何要一直留着，大概觉得这样很酷？在网上搜到一个解决办法“-webkit-text-adjust:none;”但是我测试没 有成功，谷歌直接禁了，说是没有这个东西。

后话：

最后，有一点我个人的小感受，实践确实会学到很多知识，而且没有看书那么枯燥，但是这些知识会很散漫，所以看书这样系统的学习依然是必须的，所以之后会努力结合好两者，希望能有更多的进步吧。还有还有对于ie的一点小小感悟：因为ie很个性，浏览器实现里面特别爱特立独行，所以我之前特别讨厌ie，觉得大概是一群仗着自己很6就不把别人放眼里的天才家伙们，但是现在发现ie其实确实就我个人而言是背锅小天使，它本身对于前端的实现很有想法，很多细致的地方做得很棒，而且对于前端技术的发展也很有前瞻性，所以之前之所以会不住的骂它也是因为自己的无知吧，毕竟作为天才总是有一些不同于常人的脾气才能彰显它作为天才这个事实吧。我不会再毫无理由的骂它了，不过还是真心希望它能够在未来的某天，不要如此折磨我们可爱的前端程序猿了:-)