発生したブラウザ互換性の問題と解決策_html/css_WEB-ITnose

前書き:

先週の日曜日、先輩から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 を 1 つだけ設定しても効果はありません。ああ、その位置属性はデフォルト値である静的にはできないことがわかりました。位置を相対に設定しても問題ありません。ie8 では完全な丸い角が実現されます。 (ここで、PIE を作成したエンジニアに心から感謝します。私が望む効果をこれほど簡単に実現できるのは、本当にあなたの努力のおかげです、Kangsang Amida~)

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

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

実装方法: "" を HTML に配置し、インポートされた js ファイルに実装すれば問題ありません。皆さんを幸せにするために、この期間中に私が遭遇した痛いことを話しましょう。私は長い間それに取り組んできましたが、何らかの理由でインターネットでさまざまなマスターのコードを見つけました。一つずつ比較してみたところ、うまくいかないことが判明しました！これは自尊心を傷つける行為です。すると、「ie9」と「>」（手動さようなら）の間に余分なスペースがあることが原因であることがわかりました。ただ、バグを直した後の達成感は、そのためだということだけは分かっていて、「まず100回自殺したくなる」という感じです。 jsコードを以下に掲載しますが、実は原理はとても簡単です。主に、innerWidth と clientWidth にはいくつかの小さな違いがあります。質問がある場合は、インターネット上で専門家による詳細な分析が多数あります。

4. 問題が発生しました: ie11 より前のバージョンでは、 が 内にある場合、奇妙な青い枠線が表示されます

実装方法: 0;" は間違いなくすぐに動作します

5. 問題が発生しました: フロントホームページなので、画像スクロールを書いたところ、IE10 の下の画像に不可解な余分な隙間ができました

実装方法: "display:block" を追加" to ;"素晴らしい結果

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

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

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

//html部分<br />

//这里的<br>是为了让标点也能够重起一行<br /><ul>        <li>天气真好<br>，天气真好<br>。</li>        <li>天气真好<br>。</li>        <li>天气真好<br>，天气真好<br>。</li>        <li>天气真好<br>？天气真好<br>；</li>        <li>天气真好<br>？</li></ul><br />

//css部分<br />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其实确实就我个人而言是背锅小天使，它本身对于前端的实现很有想法，很多细致的地方做得很棒，而且对于前端技术的发展也很有前瞻性，所以之前之所以会不住的骂它也是因为自己的无知吧，毕竟作为天才总是有一些不同于常人的脾气才能彰显它作为天才这个事实吧。我不会再毫无理由的骂它了，不过还是真心希望它能够在未来的某天，不要如此折磨我们可爱的前端程序猿了:-)