zoukankan      html  css  js  c++  java
  • 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{
    	 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{
             200px;
            height: 200px;
            background: red;
            !background:green;
        }
    </style>
    

    高级浏览器、IE8、IE9、IE10渲染为红色,而IE6、7渲染为绿色。

    如果想调教IE8和9,hack符写在后面,分号前:
    background-color: blue/;那么只有IE8、9会认识这行语句。

    如果想调教IE 6、7、8、9、10 ,那么hack符写在后面,分号前
    background:red9;选择符远不止这些,但是常见就是上面这些,更多的可以自己百度。

    3.CSS 选择器Hack

    选择器的hack不怎么常用
    如果想单独IE6:

    <style type="text/css">
    	* html div{
    		 200px;
    		height: 200px;
    		background-color: red;
    	}
    </style>
    

    等价于:

    div{
    	_ 200px;
    	_height: 200px;
    	_background-color: red;5	}
    

    IE6和IE7:

    div,{
    	 200px;
    	height: 200px;
    	background-color: red;	}
    

    等价于:

    div{
    	! 200px;
    	!height: 200px;
    	!background-color: red;	}
    

    除了IE6:

    html>body div{
    	 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;	}
    

    hasLayout

    翻译成人话:

    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。
    双倍margin

    解决办法是:首先,我们严禁用儿子踹父亲,所以这个文字根本不能出现,因为你用儿子踹父亲了。一定要记住,如果父子之间有空隙,一定要用父亲的padding,不要用儿子的margin!
    其次,如果你非要踹父亲,就要给第一个元素小一倍的margin:

    <ul>
    	<li class="first"></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
    
    ul li{
    	float: left;
    	 120px;
    	height: 40px;
    	background-color: pink;
    	margin-left: 60px;
    }
    ul li.first{
    	_margin-left:30px;
    }
    

    3.像素bug
    像素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

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

    png支持透明和半透明。
     png支持透明和半透明

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

    3.gif

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

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

    支持动画!
    gif

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

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

    png

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

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

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

    4.bmp

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

  • 相关阅读:
    HDU 1495 非常可乐
    ja
    Codeforces Good Bye 2016 E. New Year and Old Subsequence
    The 2019 Asia Nanchang First Round Online Programming Contest
    Educational Codeforces Round 72 (Rated for Div. 2)
    Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)
    AtCoder Regular Contest 102
    AtCoder Regular Contest 103
    POJ1741 Tree(点分治)
    洛谷P2634 [国家集训队]聪聪可可(点分治)
  • 原文地址:https://www.cnblogs.com/shy-kevin/p/11369607.html
Copyright © 2011-2022 走看看