序文
皆さんこんにちは。フロントエンド パートナーの Lizi です。2 年間の Web フロントエンド開発経験があります。ベース成都。最近、一連の密接に統合されたインタビューの後、私は楽しみにしていたオファーを得ることができました。同時に、インタビューの過程で私が尋ねた質問を継続的にまとめました.これらの質問を巧みにあなたと共有したいと思います. 同時に、皆さんのフロントエンド学習にも少しの経験をもたらしたいと思っています.
あまり話さないで、今日の本文を始めましょう~~
文章
— — — — — — — — 派手な区切り線のふりをする — — — — — — — —
Lizi の面接プロセス中に、プロジェクトの実践により注意を払う企業は、次の質問をします。
1、你在工作中有遇到哪些兼容性的问题呢，你是如何解决的呢？
2、你知道有哪些常见的兼容性问题以及怎么处理的呢？
3、什么是优雅降级和渐进增强呢
4、你了解过常见的厂商前最嘛
5、H5新标签不兼容ie怎么办呢
.......
これらの質問を見たとき、半分意識して頭の中でそれらが閃いたと感じますか? 頭は熱くなっていますが、どこから始めればよいかわかりません...
パニックにならないで、この Web フロントエンドの互換性の問題と解決策を確認し始めましょう. 完全
な互換性の問題は、私たちのすべての互換性の問題である必要がありますweb三剣士、ナニ？ウェブの三銃士？そうです、私たちの HTML、css、js.
言うことなし、才能を手に入れよう
html の互換性の問題
新しい h5 タグが ie9 とのみ互換性がある場合はどうすればよいですか?
//如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，
//其cdn写法如下：
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
PNG 24 ビット イメージが iE6 ブラウザの背景に表示される
作成PNG8，也能够引用一段脚本处理.
CSS の互換性
メディアクエリの互換性
//ie9以下不支持媒体查询，需要引入response.js文件
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script>
CSSハック
1. 属性プレフィックス
//IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
.red {
_color: red; /* ie6 */
*color: red; /* ie7 */
color: red\9; /* ie8/9/10 */ }
2.セレクタプレフィックス
//例如 IE6能识别 * html .class{
}，IE7能识别 +html .class{
}或者*:first-child+html.class{
}。
*.red {
} /* ie6 */
+.red {
} /* ie7 */
3. 条件付きコメント
//针对所有IE(注：IE10+已经不再支持条件注释)：
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
//针对IE6及以下版本
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
古いバージョンの ie でフローティングによって引き起こされる両面距離の問題
//在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍
//解决方案：在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别)
イメージ ギャップ – 垂直方向
//原因：图片默认基线对齐，即（vertical-align:baseline）
//解决办法
//1.设置图片的对齐方式，可把vertical_align的值设置为top、middle、bottom等
vertical-align: bottom;
//2、图片块状化（块状元素不存在基线对齐）
img{
display:block;
}
//3.设置图片的浮动属性，原理：创造一个BFC环境（由于浮动元素没有高度，为解决高度塌陷问题，一般配合overflow:hiddren使用）
img{
float: left; }
.img_box{
width: 800px;
margin: 100px auto;
background-color: red;
border:1px solid black;
overflow:hidden; //父级设定超出部分隐藏，可以解决高度
}
// 4.设置父对象的文字大小为0px;（缺点：父对象不能有文字，且无实际意义）
.img_box{
font-size: 0px;}
//5.行高足够小，使基线上移
.img_box{
line-height: 0px;}
デフォルトでは、Chrome 中国語インターフェースは 12px より小さいテキストを強制的に 12px で表示します。
//解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
JavaScript の互換性
//一般的に、プログレッシブ エンハンスメントとグレースフル デグラデーションを使用して、互換性の問題を解決します
// 优雅降级ajax
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
// 渐进增强
// 前边实现上传文件的基本功能
// 后边再判断如果支持拖拽事件，就实现拖拽上传
うーん、以上はフロントエンドインタビューでのWeb互換処理ですが、日頃の業務にはもちろん互換処理の内容がもっとあります。仕事でまとめながらも使えますよ〜
