09_CSS入门和高级技巧(7)

浏览器兼容问题

1.现在中国网民用什么浏览器？

中国流量最大的网站就是百度，百度在统计着每一个访问者的浏览器、地域、操作系统、分辨率等等信息。

百度流量研究院：http://tongji.baidu.com/data/

Chrome 41.86% 谷歌浏览器，内核名称webkit

IE8 18% win7内置的浏览器

IE9 5% win8内置的浏览器

IE6 2% winxp内置的浏览器

其他 14.52% 火狐、safari、网景、欧朋浏览器等等

Chrome浏览器的是免费的、开源的；360极速浏览器、百度浏览器、QQ浏览器都是使用的Chrome的内核，这个内核的名字叫做webkit内核。使用Chrome内核的浏览器，超过50%。

2.浏览器的渲染能力

最好的判断一个浏览器能力的测试，就是HTML5的支持测试。

www.html5test.com

满分555分，是所有HTML5、CSS3的新特性，支持就得1分，不支持不得分。

一切的罪恶的起源，就是IE6、7、8、9、10分数太低，对HTML5、CSS3的支持太差。

哆啦A梦测试：这个机器猫的所有部件都是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>

Hack

我们写的是同一份HTML、CSS代码，要分发给不同的用户。用户使用不同版本的浏览器来进行渲染，而我们写的是同一份代码。

所以，我们就急需一种功能，就是写的确实是一个代码，但是代码中的某个部分，是某个、某些特定的浏览器才能解析，其他浏览器不解析的，这种技术就是Hack（黑客）。Hack就是针对不同的浏览器去写不同的HTML、CSS样式，从而让各浏览器能达到一致的渲染效果。

Hack分为两大类：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

不可压缩，颜色不失真，是fireworks这个软件的默认保存格式，可以有图层。

在传到服务器上面的时候，所有的png图片，一定要记住去掉所有图层！去掉的方法很简单，就是“文件导出”。

我们说jpg是压缩的，png是不压缩的。但是，同一个图，jpg不一定比png尺寸小，

我们经过测试，发现这样的图片jpg的尺寸更小：

但是这样的图片png的反而更小：

所以，网页上的杂碎图标，都要存为png，尺寸更小！

png支持透明和半透明。

IE6不支持png格式的透明和半透明。

IE6中：

3.gif

gif不是压缩不压缩的问题，它就支持固定数量的颜色，可以是256种，可以是128种，可以是64种……2种。

所以是严重颜色失真！根本表示不全自然界的所有颜色！

支持动画！

尺寸比较小，因为颜色数量小，如果不动的图，那么尺寸更小！但是为什么不用gif？因为会严重失真！

gif也支持透明，fireworks设置比较复杂:

gif在IE6中的显示状态是没有任何兼容问题的，都是支持透明，不支持半透明。

所以，工作中，如果要做一个透明的元素，可以用gif，而不用png。因为pngIE6不兼容。

当然了，如果你们公司不考虑IE6，就全用png就行了。

4.bmp

是windows画图的保存格式，不压缩的，不失真的，不能动，不能有透明、不能有半透明、没有图层。