ブラウザの互換性の問題
1.中国のインターネットユーザーは今何のブラウザを使うのか？
中国最大のウェブサイトのトラフィックは、Baiduの、など各訪問者のブラウザ、地域、オペレーティングシステム、解像度、とBaiduの統計です。
Baiduの交通機関：のhttp：//tongji.baidu.com/data/
クロム41.86パーセント、Googleのブラウザ、WebKitのカーネル名
内蔵のブラウザIE8 18％のwin7の
内蔵のブラウザIE9 5％win8
内蔵のブラウザIE6 2％のWinXPの
その他の14.52パーセントのFirefox、サファリ、ネットスケープ、ヨーロッパ鵬ブラウザ、など
Chromeブラウザは無料、オープンソースであり、カーネルクローム360スピードブラウザは、Baiduのブラウザ、QQのブラウザが使用され、このカーネル名がWebKitのコアです。Chromeブラウザカーネルは、50％以上を使用してください。
2.ブラウザのレンダリング機能
ブラウザの能力を決定するための最良のテストでは、HTML5のサポートのテストです。
www.html5test.com
すべてのHTML5、CSS3の新機能である555ポイントのうち、あなたが一点をサポートする必要が、それはポイントをサポートしていません。
すべての悪の起源は、IE6,7,8,9,10スコアで、HTML5、CSS3のための貧弱なサポートは低すぎます。
夢のテスト：これはCSS3バイキングのすべての部分は書いています：
3.サブフェーズを使用する方法は、親絶対バールを中心とします
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.banner{
position: relative;
height: 567px;
overflow: hidden;
}
.banner img{
position: absolute;
left:50%;
margin-left: -960px;
}
</style>
</head>
<body>
<div class="banner">
<img src="images/banner1.jpg" alt="" />
</div>
</body>
</html>ハック
私たちは、異なるユーザに配布するために、同じ1つのHTML、CSSコードで記述します。ユーザーがレンダリングするブラウザの異なるバージョンを使用して、我々は同じコードで記述します。
だから、私たちは機能のために必要な、本当に書くことでコードですが、コードの一部は、解決するためにある特定のブラウザで、他のブラウザが解決されていない、この技術はハックです（ハッカー）。ハックは、各ブラウザが一貫したレンダリングを実現することができるように、さまざまなHTML、CSSスタイルを書くために別のブラウザのためです。
HTMLハック、CSSハック：2つのカテゴリに分かれハック。
1.HTMLハック
写一段html代码，这段html代码只能在IE6、7中运行，IE8不运行。
<!--[if lte IE 8]>
自定HTML内容
<![endif]-->上面的这个壳子很神奇，IE6、7、8会渲染里面的内容；而IE9、IE10、Chrome等等浏览器都会认为这些代码是注释。
所以，我们可以用这个方法，单独的为IE浏览器写特殊的HTML标签。
如果版本小于等于IE8，那么识别，否则当做注释了：
<!--[if lte IE 8]>
<![endif]-->如果版本小于IE8，那么识别，否则当做注释了：
<!--[if lt IE 8]>
<![endif]-->如果版本大于IE8，那么识别，否则当做注释了：
<!--[if gt IE 8]>
<![endif]-->如果版本大于等于IE8
<!--[if gte IE 8]>
<![endif]-->如果版本是IE6：
<!--[if IE 6]>
<![endif]-->用途，比如让IE6、7、8运行一段JS代码，而其他浏览器不运行：
<!--[if lte IE 8]>
<script type="text/javascript" src="1.js"></script>
<![endif]-->特别注意，这个Hack不能写在CSS里：
错误的写法：
<style type="text/css">
<!--[if lte IE 8]>
h1{
color:red;
background-color: yellow;
}
<![endif]-->
</style>2.CSS 值Hack
CSS HACK又分为两类：值Hack 和 选择器Hack
先来学习值Hack：
IE6专用的“hack符”就是短横、下划线。
div{
width: 200px;
height: 200px;
background: red;
_background: blue;
}
那么高级浏览器不识别_background:blue;这行语句的，视为这是unknown property name;IE6自己，会渲染为蓝色。
短横和下划线都行。
_background:blue;
等价于：
-background:blue;
如果想同时调教IE6、7：
hack符可以是任意一个：! $ & * ( ) = % + @ , . / [ ] # ~ ? : < > | */`
比如：
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
!background:green;
}
</style>高级浏览器、IE8、IE9、IE10渲染为红色，而IE6、7渲染为绿色。
如果想调教IE8和9，hack符写在后面，分号前：
background-color: blue\0/;那么只有IE8、9会认识这行语句。
如果想调教IE 6、7、8、9、10 ，那么hack符写在后面，分号前：
background:red\9;选择符远不止这些，但是常见就是上面这些，更多的可以自己百度。
3.CSS 选择器Hack
选择器的hack不怎么常用
如果想单独IE6：
<style type="text/css">
* html div{
width: 200px;
height: 200px;
background-color: red;
}
</style>等价于：
div{
_width: 200px;
_height: 200px;
_background-color: red;5 }IE6和IE7：
div,{
width: 200px;
height: 200px;
background-color: red; }等价于：
div{
!width: 200px;
!height: 200px;
!background-color: red; }除了IE6：
html>body div{
width: 200px;
height: 200px;
background-color: red; }如果有兴趣，可以自行百度，工作中用不着这么多。
IE6的问题
1.选择器的兼容问题
IE6不支持连续类的交集选择器：
<style type="text/css">
.haha.cur{
color:red;
}
</style>怎么解决？很简单，就不要这么写就行了，改成标签开头：
li.cur{
}其他我们学习的7种选择器，IE6支持良好，权重计算良好。
p #id .class div p div.haha div,p *
2.盒模型的兼容性问题
如果不写DTD，那么IE6的盒模型就是内减的，而不是外扩的：
解决办法就是写好DTD，别不写！
不支持小于一个文字高度的盒子
任何浏览器都有默认字号，IE6的默认字号是14px，所有小于字号的盒子都不能正常渲染，高度不能小于字号。
解决办法很简单，就是用_单独给IE6设置一个盒子的字号，字号比height小就行了，一般来说是0：
height: 4px;
_font-size: 0;
3.浮动的兼容性问题
标准流的盒子不往里面钻
解决办法：我们根本就不允许大家，用浮动来制作压盖；应该用定位来制作压盖。
overflow:hidden;小偏方不支持的
父亲里面有脱标的儿子，所以就不能被脱标的儿子撑高，就要写overflow:hidden;这个小偏方。
IE6不领情。解决办法就是触发IE6的haslayout机制。
div{
border: 10px solid red;
overflow: hidden;
_zoom:1; }
翻译成人话：
IE6里面有两个儿子撑父亲的机制，一种是有hasLayout，一种是没有。所谓的layout就是布局的意思。
zoom 总是可以触发 hasLayout。zoom这个属性，是用来控制一个元素缩放倍数的，是IE特有的属性，Chrome现在的版本也支持了。加上zoom属性的元素，都能触发这个元素的hasLayout，所以IE6就用另一种方式渲染盒子了。
也就是说，IE6你要敏感，比如遇见了一个height很小的盒子：
height:5px;
_font-size:0;比如你现在父亲要得到脱标儿子的宽度：
overflow:hidden;
_zoom:1;双倍margin
连续多个元素浮动，浮动的方向和margin的方向相同，最后一个、最开头的一个都有可能出现双倍的margin。
解决办法是：首先，我们严禁用儿子踹父亲，所以这个文字根本不能出现，因为你用儿子踹父亲了。一定要记住，如果父子之间有空隙，一定要用父亲的padding，不要用儿子的margin！
其次，如果你非要踹父亲，就要给第一个元素小一倍的margin：
<ul>
<li class="first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>ul li{
float: left;
width: 120px;
height: 40px;
background-color: pink;
margin-left: 60px;
}
ul li.first{
_margin-left:30px;
}3.像素bug
左边粉色盒子浮动了，蓝色盒子没有浮动，那么之间就有3px的空隙。
解决办法：首先，压根就不能出现一个浮动，另一个不浮动的情况。因为这种情况，在高级浏览器中，就已经蓝色盒子就已经往下钻了，就已经产生了更大层次的不兼容。
如果要解决，就是左边盒子的
_margin-right:-3px;
4.定位的兼容问题
IE6不支持
position:fixed;
怎么解决？用js来模拟固定定位。
5.文字样式的兼容问题
IE6、7、8中，所有有超级链接的图片，都默认有一个蓝色边框：
解决办法：
a img{
border:none;}或者干脆：
img{
border:none;3 }透明
1.盒子的透明
opacity: 0.40;
opacity就是透明度的意思，能够背下来这个单词。值是0~1；1就是实心，0就是纯透明。
IE6~8不支持。要写IE自己的属性，自己的滤镜的属性：
filter:alpha(opacity=40);
要注意的是，里面的文字也一起有透明了。解决办法就是不要把有opacity属性的盒子里面写文字。把文字单独放出去，用绝对定位给定位到一起：
<div class="box">
<img src="images/1.jpg" alt="" />
<div class="title"></div> → 半透明黑色
<span>文字文字文字文字</span> → 白色文字，给定位到一起。
</div>也就是说，盒子透明有兼容性问题，但是能够轻松解决，所以等于没有兼容性问题。
2.图片的透明
网页中的图片格式：
1.jpg/jpeg：
压缩格式，是颜色失真的，为了保存尺寸小，所以有压缩算法，所以是颜色失真的。网页中的照片、新闻图片、banner、焦点图都要用jpg的格式，因为这样保存的尺寸就小。没有图层。不支持透明和半透明。
在导出之前，用导出预览调整一下“质量”。
2.png
非圧縮性、色の歪み、フォーマット花火の保存デフォルトでは、このソフトウェアで、あなたは層を有することができます。
すべてのPNG形式の画像上のサーバへの時間では、すべての層を除去するために覚えておく必要があります！この方法は、削除することは非常に簡単である、「ファイルのエクスポート」です。
私たちは、ある圧縮JPGは、PNGが圧縮されていないと言います。しかし、同図、JPG、PNGのサイズよりも必ずしも小さくはありませんが、
私たちは小さいサイズをJPG、このような絵をテストしました：
しかし、この絵のPNGのは小さいです：
だから、ページ上の臓物のアイコンは、PNG、小さいサイズとして保存する必要があります！
PNGのサポート透明と半透明。
IE6は透明と半透明のPNG形式をサポートしていません。
IE6で：
3.gif
GIF圧縮されていない問題を圧縮していない、それは色の固定数をサポートするには、......の64種類は2種類であってもよい、128種であってもよい、256種であってもよいです。
だから、深刻な色の歪みがあります！単にそのすべての色の不完全な性質を意味します！
アニメーションをサポートしています！
サイズが比較的小さいマップが移動しない場合は、理由は色数が少ないのは、小さいサイズ！しかし、なぜがgifではありませんか？真剣に歪んでいるので！
GIFは、透明サポートし、より複雑な設定、花火を：
IE6のステータスGIFは、互換性の問題ではない表示され、それは半透明サポートしていない、透明支持されています。
だから、仕事で、透明要素で行う場合は、あなたの代わりにPNGの、gif形式を使用することができます。それは互換性pngIE6されていないため。
もちろん、あなたの会社は、ライン上のPNGと全体的に、IE6を考慮していない場合。
4.bmp
Windowsの描画をフォーマット、非圧縮、歪みのない保存され、透明性、半透明ではない、ない層を持つことができない、移動することはできません。