ホームページ > 記事 > ウェブフロントエンド > よくあるブラウザの互換性問題、ボックスモデルの2つのモードとCSSハックの知識解説_html/css_WEB-ITnose
よくあるブラウザの互換性問題、ボックスモデルの2つのモードとCSSハックの知識解説_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:321312ブラウズ
什么是浏览器兼容问题？所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
总结一下我编写代码的时候遇到的浏览器兼容问题，跟大家学习。
一、解决无法在IE6下面设置1px高的容器(div)的问题。
大家看看这一段代码：
390ef9ca8608782efbd07e7cf12d786916b28748ea4df4d9c2150843fecfba68
当然，这段代码在非IE6下是能够设置1px高度的div的（如左图），但是在IE6中的效果如右图：
非IE6下： IE6下：
解决方案：在div里面添加一个空格符( )以创建内容；再设置line-height:1px;即可。
ed52dd8e27010e095b29413164248d46 16b28748ea4df4d9c2150843fecfba68
二、透明度opacity不兼容的问题，opacity是属于css2.1的内容，在IE6中并不支持（另外position:fixed;也是css2.1的内容，并不支持IE6）。
创建一个宽高100px的div，设置透明度为0.5，背景色黑色如下：
c9ccee2e6ea535a969eb3f532ad9fe89
div{
height: 100px;
width: 100px;
opacity:.5;
background: #000;
}
531ac245ce3e4fe3d50054a55f265927
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
效果图分别如下：左边为非IE6，右边是IE6
非IE6： IE6：
会看到在IE6中并不支持该属性，解决方案：
c9ccee2e6ea535a969eb3f532ad9fe89
div{
height: 100px;
width: 100px;
opacity:.5;
filter:alpha(opacity=50); //解决IE6问题
background: #000;
}
531ac245ce3e4fe3d50054a55f265927
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
3. IE6 での水平方向の二重マージンのバグ。 float に設定された div に設定されたマージンは、IE では 2 倍になります。これはie6に存在するバグです。
このようなバグを最初に引き起こすには、次の条件が満たされている必要があります:
1. 要素は float である必要があります;
2. 要素は水平マージン、マージン左、マージン右を持つ必要があります
3. 要素ブロック要素である必要があります
4. ブラウザは IE6 である必要があります。
上記の条件は必須なのでIE6でない限りこの問題は存在しません。解決策は簡単で、条件の 1 つを破棄するだけです。
例:
<head> <meta charset="UTF-8"> <title>测试浏览器兼容问题</title> <style> body{ background: #fff; } .wrap{ width: 300px; height: 150px; margin:50px auto; border: 2px solid #333; overflow: hidden; } .wrap div{ height: 100px; width: 100px; background: #333; float: left; margin-left: 20px; } </style></head><body> <div class="wrap"> <div></div> <div></div> </div></body>
レンダリングは次のとおりです: 左が非IE6、右がIE6です
IE6では、左側のmargin-leftの値が40pxであることがわかります。 、解決策は、display:inline を row 属性に変換することです。
4. IE6 では、画像に a タグを追加すると、デフォルトで枠線が表示されます。
img{
幅: 100px;
高さ: 100px;
}
15ce3e7494a3f16b144b37e8fd65c1dafbc521a055ec7c2afee0f232bdb496cb
レンダリングは次のとおりです: 左が非 IE6、右が IE6
この問題は比較的簡単に解決できます。画像の border:none; を設定するだけです。なお、aタグのborder値は設定されていませんが、画像が設定されています。
5. IE6 は、png 形式の画像の透明効果をサポートしていません。
解決策: プラグインを使用します: DD_belatedPNG.js プラグイン (このプラグインが必要な場合は、自分で Baidu を使用できます:))
使用方法の説明: 次のコードを貼り付けるだけです
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix('*'); </script> <![endif]-->
6. 所有権レイアウト haslayout について言及します。ブラウザの互換性の問題について話すときは、haslayout について言及する必要があります。
IE6と7では、レイアウトを持っていることがトリガーされない場合があります。ハレイアウトとは何ですか？私の理解では、要素 (タグ) にレイアウトがある場合、その要素は独自のデフォルト スタイルを取得し、すべてのレイアウトはこのデフォルト標準に従ってレイアウトされます。つまり、このレイアウトは正常であるということです。しかし、要素にデフォルトのレイアウトがない場合、レイアウトが乱雑になるでしょうか? (指定するスタイルは要素のレイアウト [デフォルト スタイル] に基づいているため)。したがって、この場合は、この所有レイアウトをトリガーし、haslayout をトリガーする必要があります。
haslayout をトリガーするには多くの方法があります:
1. 最も一般的で最も安全な方法: haslayout のない要素にzoom:1; を設定します (実際には、それが 1 であるかどうかは問題ではありません。なし）。他のブラウザではまったく認識されないため、最も安全であると言われています。
2. 高さを設定します: auto を除く任意の値。
3. フロートを設定します。
4. 幅を設定: auto 以外の任意の値。
7. ボックスモデルの 2 つのモードを紹介します。
皆さんはボックスモデルに精通しているはずです。ここでは、標準モードと奇妙なモードの2つのモードを紹介します
標準モード：通常、IE以外のブラウザで使用されます。計算方法：占有スペースの幅＝コンテンツの幅＋左右の内マージンの幅＋左右のボーダーの幅＋左右のマージンの幅（マージン＋パディング＋ボーダー＋ content）
奇妙なモード：IE6を指す IE以前のバージョンの下側ボックスモデルの計算方法：占有領域の幅の合計＝コンテンツ＋マージン（コンテンツ＋マージン）
類似点それらの違いは実際に簡単に確認できます:
同じ点: それらはすべてマージン、ボーダー、パディング、コンテンツで構成されます
違い: 標準モードのボックスの幅と高さの合計の計算方法が異なります。マージン、パディング、ボーダー、およびコンテンツの合計です。奇妙なモードでは、合計の幅はコンテンツからパディングとボーダーを差し引くことによって取得されます。
8. ブラウザの互換性には他にも問題があります。時間に限りがあるため、以下で一つ一つ説明しません:
①: さまざまなブラウザで img にギャップがあります (理由は次のとおりです)。 )
②: Ie6 では、最大幅、高さ、最小幅と高さが認識されず、min-width/height と Max-width/height は Ie6 では効果がありません、
③: 3 ピクセルの問題: 以下IE6、フローティング要素とフロー要素を並べて表示すると、それらの間に 3 ピクセルの問題が発生します。 （解決にはハックを使用します）
④：インライン要素を包含ボックスとして定義し、その包含ボックスに含まれる絶対配置要素をパーセント単位で配置すると混乱が生じます（ズーム：1）
⑤ : 複数ある場合 フローティング要素の途中にHTMLのコメント文がある場合、フローティング要素の幅が100%の場合、前の行の最後の文字が次の行に表示されます。
⑥: 2 つのブロック要素の場合、垂直マージン値は増加せず、それらの間の距離が最大マージン値になります。
⑦：优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。
⑧：火狐不识别background-position-y 或background-position-x;
⑨：ie6 不支持 fixed（前面有提到）
⑩：解决 ie6 最大、最小宽高 hack方法（这个说明一下）
/* 最小宽度 */.min_width{ min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);}/* 最大宽度 */.max_width{ max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);}/* 最小高度 */.min_height{ min-height:200px; _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);}/* 最大高度 */.max_height{ max-height:400px; _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);}
①①：z-index不起作用的 bug
九、css hack：前端开发人员根据不同的浏览器以及不同的版本而分别编写的特定的CSS样式，通俗理解就是专门为不同浏览器设置自己的样式。
各版本IE的hark，代码表示：
.bb{
height:32px;
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#f1ee18; /*IE6、7识别*/
_background-color:#f1ee18; /*IE6识别*/
}
66192000bf42bc371da470065e96ccb4d7071d505605c2696124ea5fd5f10648
像刚刚png图片不支持插入的代码一样，这种hack用在专门浏览器下，用法如下：下面还有很多类。
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix('*'); </script> <![endif]--> | 符号 | 含义 | 示例 |
| ！ | 非运算符 | 764937090aebb99074a0330a194a080a4e255cca6c1c1c2b4c46e2b80a10fe99 除IE外都可识别 d209044b8e2138c461665ded4d2a3f8e bd38702fa544125f6bfb78daf3605553除IE6外可以识别1b771f47d72d900ba74308aee59557f0 |
| lt | Less than小于 | 198910ec5f8275cd8d22808ceec76b2eIE8以下版本1b771f47d72d900ba74308aee59557f0 |
| gt | greater than大于 | a8c7a5855868309828fae19e28986cd4IE8以上版本1b771f47d72d900ba74308aee59557f0 |
| lte | less than或equal小于等于 | 9e0699ef0e83a19626483fd2579eebd5IE8及IE8以下版本1b771f47d72d900ba74308aee59557f0 |
| gte | greater than或equal大于等于 | 69c7634733d1325e70af68d36d40a62aIE8及IE8以上版本1b771f47d72d900ba74308aee59557f0 |
| | | 或运算符 | d81d84c1216fdebfe2395ee17a97371cIE7或IE8版本1b771f47d72d900ba74308aee59557f0 |
| & | 与运算符 | e02e2a3e50abc27496574d19e69d4d02除IE8外IE6以上版本1b771f47d72d900ba74308aee59557f0
|
/*类内部hack：*/ .header {_width:100px;} /* IE6专用*/ .header {*+width:100px;} /* IE7专用*/ .header {*width:100px;} /* IE6、IE7共用*/ .header {width:100px\0;} /* IE8、IE9共用*/ .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/ .header {width:330px\9\0;} /* IE9专用*//*选择器Hack：*/ *html .header{} /*IE6*/ *+html .header{} /*IE7*/