Browser compatibility issues
1. Chinese Internet users now use the browser what?
China's largest website traffic is Baidu, Baidu statistics with each visitor's browser, geography, operating system, resolution, and so forth.
Baidu Traffic Institute: http: //tongji.baidu.com/data/
Chrome 41.86% Google browser, webkit kernel name
IE8 18% win7 built-in browser
IE9 5% win8 built-in browser
IE6 2% winxp built-in browser
Other 14.52% Firefox, safari, Netscape, Europe Peng browser, etc.
Chrome browser is free, open source; kernel Chrome 360 speed browser, Baidu browser, QQ browser is used, this kernel name is webkit core. Use Chrome browser kernel, more than 50%.
2. The browser's rendering capabilities
The best test to determine the ability of a browser is HTML5 support testing.
www.html5test.com
Out of 555 points is all HTML5, CSS3 new features, you have to support one point, it does not support the no points.
The origin of all evil, is IE6,7,8,9,10 score is too low, poor support for HTML5, CSS3's.
A dream Test: This is all part of CSS3 Viking wrote:
3. The method of using the sub-phase is centered on the parent absolute bar
<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>Hack
We write is the same one HTML, CSS code to be distributed to different users. Users use different versions of the browser to render, and we write is the same code.
So, we need for a function, is to write really is a code, but a part of the code, is a certain specific browser to resolve, other browsers are not resolved, this technique is Hack (hacker). Hack is for different browsers to write different HTML, CSS styles, so that each browser can achieve consistent rendering .
Hack divided into two categories: HTML hack, CSS hack.
1.HTML Hack
写一段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
Incompressible, color distortion, is the default save format fireworks this software, you can have layers.
In time to the server above all png image, you must remember to remove all the layers! The method is very simple to remove, is the "file export."
We say that is compressed jpg, png is not compressed. However, the same figure, jpg png is not necessarily smaller than the size,
we tested and found such a picture jpg smaller size:
But this picture png's but smaller:
So, offal icon on the page, must be saved as png, smaller size!
png support transparent and translucent.
IE6 does not support transparent and semi-transparent png format.
IE6 in:
3.gif
gif not compress uncompressed problem, it supports a fixed number of colors, can be 256 species, may be 128 species, 64 kinds of ...... may be two kinds.
So serious is the color distortion! Simply means that all colors incomplete nature!
Support animation!
Size is relatively small , because of the small number of colors, if the map does not move, then the smaller size! But why not gif? Because seriously distorted!
gif also supports transparent , fireworks set up more complex:
Displays the status gif in IE6 are no compatibility issues, are transparent support, it does not support translucent.
So, at work, if done in a transparent element, you can use gif, instead of png. Because it is not compatible pngIE6.
Of course, if your company does not consider IE6, on the whole with png on the line.
4.bmp
Windows drawing is saved format, uncompressed, undistorted, can not move, can not have transparency, not translucent, no layers.