css样式问题综合
Html
1. html转义字符
转换字串中的字符.
字符 实体名称 实体数字 描述
2. Html--Abbr标签：
Css3:
3. 文本问题：
(1).writing-mode将页面默认的水平流改成了垂直流
(2).设置多行文本省略号显示：
单行文本省略号显示：
.text{
white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
}
多行文本省略号显示：
.text{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
(3).使用letter-spacing使文字两端对齐
（设置字段最后一个字符的letter-spacing为0，设置整个label的letter-spacing）
IE7与FF下的letter-spacing属性兼容性写法
letter-spacing:控制单个字符或者文字的间距
①在IE7下，至少要有两个字符才行，如
这样才会在中间产生一个等字符大小的间距
②但是在FF下，刚才的代码就是在每个字符的右边产生一个1em的间距，也就是“码”和“：”之间也有一个间距，只有写成
才能起到需要的效果，与①产生的效果一样
这样就产生了一个浏览器兼容性问题，解决的办法就是把代码写成这样的
代码如下:
这样在IE7、8、9、FF5、谷歌、opera等浏览器中都产生了相同的效果！
(4).文字默认有行间距，需设置line-height:1
(5).在有的网页里有这个用法 hidefocus="hidefocus" 起什么作用？
点这个,周围不会出现虚线,焦点虚线被隐藏
可以用来保持页面视觉效果不被表示焦点的虚线破坏.
CSS3文本(一)—text-overflow文本溢出
说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
浏览器支持： 所有主流浏览器都支持 text-overflow 属性。
语法：text-overflow: clip（默认值）| ellipsis ;
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本。
示例
div.test{
text-overflow:ellipsis;
}
1）clip: 直接将溢出的文字裁剪
This is some long text that will not fit in the box
2）ellipsis: 将溢出的文字显示省略标记（...）
This is some long text
CSS3文本(二)—text-transform文本大小写转换
说明：text-transform 属性处理文本的大小写。这个属性有 4 个值：
语法：text-transform：none(默认值) | capitalize | uppercase | lowercase
1) text-transform:none /* 默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。 */
2) text-transform:capitalize /* 将每个单词的第一个字母转换成大写 */
3) text-transform:uppercase /* 转换成大写 */
4) text-transform:lowercase /* 转换成小写 */
h1 {text-transform: uppercase}
使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。
CSS3文本(三)—text-shadow设置文本阴影
说明：text-shadow设置文本阴影。text-shadow 可向文本应用阴影。您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
示例
h1{
text-shadow: 5px 5px 5px #FF0000; /* 第1个5px是阴影水平偏移值，第2个长度值是阴影垂直偏移值 ，第3个阴影模糊值*/
}
注：下面所有的Demo需要加上这个公用的样式：
.demo {
background: #666666;
width: 440px;
padding: 30px;
font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
color: #fff;
text-transform: uppercase;
}
效果一：Glow and Extra Glow effect(也就是NEON effect)
.demo2 {
text-shadow: 0 0 20px red;
}
辉光效果，我们设置比较大的模糊半径来增加其辉光效果，你可以改变不同的模糊半径值来达到不同的效果，当然你也可以同时增加几个不同的半径值，创造多种不同的阴影效果。就如下面的NEON效果。
.demo3 {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
效果二：Apple Style Effect
.demo4 {
color: #000;
text-shadow: 0 1px 1px #fff;
}
效果三：Photoshop Emboss Effect
.demo5 {
color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}
效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很类似我们 photoshop中的投影和浮雕效果的呀。应用这两个效果大家一定要注意，其模糊值一定要设置为0，使文本不具有任何模糊效果，主要用来增加其质感，你也可以像photoshop中制作一样，改变不同的投光角度，从而制作出不同的效果，这里我就不举例子了，感兴趣的朋友可以自己尝试一下。
效果四：Blurytext Effect
.demo6 {
color: transparent;
text-shadow: 0 0 5px #f96;
}
用text-shadow制作模糊的效果主要要注意一点就是，把文本的前景色设置为透明transparent,如果模糊值越大，其效果越糊糊；其二，我们不设置任何方向的偏移值。如果结合前面的photoshop emboss效果，可以让你等到不同的效果。提醒一下opera浏览器不支持这个效果。
我们结合前面的Photoshop Emboss效果，我们可以制作出一个带有模糊的浮雕效果：
.demo7 {
color: transparent;
text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
}
效果五：Inset text effect
.demo8 {
color: #566F89;
background: #C5DFF8;
text-shadow: 1px 1px 0 #E4F1FF;
}
这种效果需要注意以：文字的前景色要比背景色暗，阴影颜色稍比背景色亮一点点，这一步很重要，如果阴影色太亮看起来会怪，如果太暗将没有效果显示。具体实现可能看看stylizedweb的制作。Inset效果是文本的影子效果，也是常见的一种效果，阴影是同一个小偏移量给人一种微妙的突出效果。
效果六：Stroke text effect
.demo9 {
color: #fff;
text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96;
}
描边效果跟我们在Photoshop相比，我承认效果差很多，出现断点，但有时还是可以试用达到一种特殊的描边效果，其主要运用两个阴影，第一个向左上投影，而第二向右下投影，还需注意，制作描边的阴影效果我们不使用模糊值。
效果七：3D text effect
.demo10 {
color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
}
我们换过投影方向可以制作出另外一种3D文字效果
.demo11 {
color: #fff;
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}
3D文字效果运用原理就是像Photoshop一样，我们在文字的下方或上方复制了多个图层，并把每一个层向左上或右下方向移动一个1px距离，从而制作出3D效果。同时我们层数越多，其越厚重。换成用text-shadow制作就是使用多个阴影，并把阴影色设置相同，给其使用rgba色效果更佳，如上面的实例。
效果八：Vintge/Retro text effect
.demo11 {
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}
Vintage retro这种风格的文字效果是由两个文本阴影合成的，这里需要注意的是：第一个阴影色和背景色相同；文本前景色和第二个阴影色相同
效果九：Anaglyphic text effect
.demo13 {
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}
anaglyphic文字效果起到一种补色的效果，从而制作出一种三维效果图。其效果是用css重新使用的文字阴影和文本前景的rgba色组合而成。在文本的前景色和阴影上同时使用rgba色，使底层的文字是通过影子可见。
CSS3文本(四)—text-fill-color文字填充颜色
说明：检索或设置对象中的文字填充颜色。通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效果
兼容：目前只有Chrome13.0、safari5.1能支持
写法：
1）Webkit(Chrome/Safari)内核内型 -webkit-text-fill-color
2）W3C 写法 text-fill-color
渐变文字
div{
font-size: 30px;
background: -webkit-linear-gradient(top,#fc0,#f30 50%,#c00 51%,#600);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
镂空文字
div{
font-size: 30px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #fff;
background:#000;width:300px
}
text-fill-color
div{
background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size:40px
}
CSS3文本(五)—text-stroke文字描边
说明：复合属性。设置或检索对象中的文字的描边。
兼容：目前只有Chrome13.0、safari5.1能支持
语法：text-stroke：[ text-stroke-width ] || [ text-stroke-color ]
text-stroke-width 设置或检索对象中的文字的描边厚度
text-stroke-color 设置或检索对象中的文字的描边颜色
写法：
1）Webkit(Chrome/Safari)内核内型 -webkit-text-fill-color
2）W3C 写法 text-fill-color
我是被描了1像素红边的文字
-webkit-text-stroke:1px #f00;text-stroke:1px #f00;
CSS3文本(六)—word-wrap自动换行
说明：检索或设置对象中的单词之间间隔。在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分
语法：word-wrap：normal（默认值） | break-word
1）normal：允许内容顶开或溢出指定的容器边界。
2）break-word：内容将在边界内换行。如果需要，单词内部允许断行。
示例：
p {word-wrap:break-word;}
normal：
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
break-word：
break-word：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
4. CSS3字体问题
(1).手机系统默认字体Foundation
Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。
ios、android 系统字体说明:
2016年05月06日 15:52:04
后来了解到的手机系统 ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？
相信大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载
1 2 3 4 5 6 7 8 |
@font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */ url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */ url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */ } |
雅黑字体问题虽然解决了，但也带来了影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。
总感觉不好，为了说服产品经理，找了三大手机系统的字体资料：
ios 系统
· 默认中文字体是Heiti SC
· 默认英文字体是Helvetica
· 默认数字字体是HelveticaNeue
· 无微软雅黑字体
android 系统
· 默认中文字体是Droidsansfallback
· 默认英文和数字字体是Droid Sans
· 无微软雅黑字体
winphone 系统
· 默认中文字体是Dengxian(方正等线体)
· 默认英文和数字字体是Segoe
· 无微软雅黑字体
附：ios7字体列表
并做了个小测试，下图为测试机 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现：
我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体，有无衬线只是一个小原因，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。
有关衬线字体和无衬线字体的差别，参考下图：
那么，使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别，权衡利弊，最终说服了产品经理放弃使用微软雅黑的想法。
结论
· 各个手机系统有自己的默认字体，且都不支持微软雅黑
· 如无特殊需求，手机端无需定义中文字体，使用系统默认
· 英文字体和数字字体可使用 Helvetica ，三种系统都支持
代码：
1 2 |
/* 移动端定义字体的代码 */ body{font-family:Helvetica;} |
ps:另外关于移动端的字体单位，rem是相当好用的，也给大家推荐一下，具体使用看这里：http://ued.taobao.org/blog/2013/05/rem-font-size/
(2).@font-face设置字体
@font-face{
font-family:'NumFont';
src:url('../font/DINOT-Medium.ttf');
src:url('../font/DINOT-Medium.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
(3).ie9字体不能垂直居中 ie9 line-height失效兼容问题解决篇
在IE9中浏览DIV CSS网页文字字体偏上方，设置文字垂直上下居中line-height样式失效，而其它浏览器包括ie6-ie8均正常，究竟什么原因造成，如何解决与避免在ie9浏览器line-height失效。
1).ie9 line-height失效原因
CSS中使用了中文字体，而中文字体使用汉字。如：
font-family:"微软雅黑"
使用CSS字体font-family样式使用了“宋体”、“黑体”或“微软雅黑”等中文字体以汉字设置于CSS中。
在网页DIV+CSS布局中不可避免使用中文字体如：黑体、宋体、微软雅黑等中文字体，如何正确使用这些中文字体样式呢？接下来我们来了解如何解决使用这些中文字体，又兼容IE9，支持IE9使用汉字字体。
2).解决ie9字体不垂直居中方法
1、将中文字体汉字转换为Unicode编码
“黑体”对应Unicode编码为“\9ED1\4F53”
“宋体”对应Unicode编码为“\5B8B\4F53”
“仿宋”对应Unicode编码为“\4EFF\5B8B”
“微软雅黑”对应Unicode编码为“\5FAE\8F6F\96C5\9ED1”
将汉字转换为Unicode编码的字符，即成功设置相应字体，又兼容IE9浏览器支持垂直居中line-height样式。
实际应用exp：
1. .div{ font-family:"微软雅黑"}
转换为Unicode编码后
1. .div{ font-family:"\5FAE\8F6F\96C5\9ED1"}
汉字字体中文字转换为Unicode编码后字体效果相同，不受影响，兼容各大浏览器。
如果记不住Unicode编码表怎么办？
在CSS+DIV布局中常用css字体中，中文字体就那几个黑体、宋体、仿宋、微软雅黑。如果记不住可以进入css Unicode编码表查看并复制使用。
2、将中文字体汉字使用英文名
将CSS+DIV布局中CSS设置中文字体汉字转换对应英文名字体，转换后设置中文字体效果不变，并兼容各大浏览器。
“黑体”对应英文名为“SimHei”
“宋体”对应英文名为“SimSun”
“仿宋”对应英文名为“FangSong”
“微软雅黑”对应英文名为“Microsoft YaHei”
实际应用exp：
1. .div{ font-family:"微软雅黑"}
转换为英文名后
1. .div{ font-family:"Microsoft YaHei"}
将div css布局中css字体使用汉字字体转换为英文名的字体，其设置字体效果不变不受影响，并兼容各大浏览器，大家可以放心使用。
5. Css3 3D transform旋转
perspective |
规定 3D 元素的透视效果。 |
3 |
perspective-origin |
规定 3D 元素的底部位置。 |
3 |
backface-visibility |
定义元素在不面对屏幕时是否可见。 |
|
(1).perspective属性的两种书写（相当于translateZ）
perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例：
.stage {
perspective: 600px;
}
以及：
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
结果如下缩略图：
(2).理解perspective-origin
perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心
(3).transform-style: preserve-3d
transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。
因此，基本上，我们想要根据现实经验实现一些3D效果的时候，transform-style: preserve-3d是少不了的。一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素
(4).backface-visibility
在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素
因此，为了切合实际，我们常常会这样设置，使后面元素不可见：
backface-visibility:hidden;
(5).3d圆环效果：（舞台>容器>图片集列表）
1.舞台设置透视距离perspective: 1800px;
2:容器设置运用3d透视-webkit-transform-style: preserve-3d;
3:子元素设置图片旋转角度（rotateY角度 = 360度/图片总数）& Z轴移动距离（translateZ = ((图片宽度/2)/Math.tan((旋转度数/2)/180*Math.PI))+图片间的间距）;
(6).transform动画问题：
1. 图虚的问题scale(0)--scale(1)：scale的值不能从0开始
2. 椭圆背景从scale(0.1)--scale(1.2)--scale(1)，动画完成后图片出现锯齿:
3. 使用图片作背景，background-size:100% 100%; -------------> background-size: 98% 98%;
6. -webkit-animation的使用
-webkit-animation:仍旧是一个复合属性，
-webkit-animation: name duration timing-function delay iteration_count direction;
包括以下几个属性
（1） -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一起使用
eg:
@-webkit-keyframes fontchange{
0%{font-size:10px;}
30%{font-size:15px;}
100%{font-siez:12px;}
}
百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大
div{ -webkit-animation-name:fontchange;}
（2）-webkit-animation-duration 表示动画持续的时间
（3）-webkit-animation-timing-function 表示动画使用的时间曲线
【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out
（4）-webkit-animation-delay 表示开始动画之前的延时
【语法】 -webkit-animation-delay: delay_time;
（5）-webkit-animation-iteration-count 表示动画要重复几次
【语法】-webkit-animation-iteration-count: times_number;
（6） -webkit-animation-direction 表示动画的方向
【语法】-webkit-animation-direction: normal(默认) | alternate
normal 方向始终向前
alternate 当重复次数为偶数时方向向前，奇数时方向相反
【另外】跟animation有关的其他属性
（1）-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结
果不是很清晰）
（2）-webkit-animation-play-state: running（默认） | paused 设置动画的运行状态
综合案例：
@-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}
#box {
-webkit-animation-name: fontbulger;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:3;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s;
}
7. 文本阴影&盒子阴影：
设置文本阴影：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
Eg: text-shadow: 5px 5px 5px #FF0000;
设置盒子阴影：box-shadow: h-shadow v-shadow blur spread color inset;
Eg: box-shadow: 10px 10px 5px #888888;
8. css3自定义滚动条样式：
(1).滚动条组成
· ::-webkit-scrollbar 滚动条整体部分
· ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
· ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
· ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
· ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
· ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
· ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
(2).简洁版
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
(3).隐藏滚动条兼容各个浏览器
/*兼容谷歌*/
.scrollTable::-webkit-scrollbar {
width:0px;
height:0px;
}
.scrollTable::-webkit-scrollbar-button {
background-color:rgba(0,0,0,0);
}
.scrollTable::-webkit-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scrollTable::-webkit-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scrollTable::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scrollTable::-webkit-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scrollTable::-webkit-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
.scrollTable::-webkit-scrollbar {
width:10px;
height:10px;
}
/*o内核*/
.scrollTable ::-o-scrollbar{
-moz-appearance: none !important;
background: rgba(0,255,0,0) !important;
}
.scrollTable::-o-scrollbar-button {
background-color:rgba(0,0,0,0);
}
.scrollTable::-o-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scrollTable::-o-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scrollTable::-o-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scrollTable::-o-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scrollTable::-o-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
.scrollTable{
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
}
/*火狐需要动态的js修改 并引入插件*/
9. CSS3选择器
首先说first-child与last-child，这两个选择器很容易明白，就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素，甚至第偶数个、奇数个子元素精选样式的制定。
/*选择器写法示例*/
nth-child(n) //正数第n个子元素
nth-last-child(n) //倒数第n个子元素
nth-child(odd) //正数下来所有的第偶数个子元素
nth-last-child(even) //倒数上去的第奇数个子元素
那么nth-of-type与nth-last-of-type呢？
在一个div中有数篇文章，h2与p多次使用的情况要对h2实现奇偶异色，如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码，读者可自行编写h2ph2ph2p如此)，试验的结果是没有出现奇偶异色，仅仅是奇数的变色了。
这个问题产生的原因是，nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。换句话说，”h2:nth-child(odd)”这句话的含义，并不是指“针对div元素中第奇数个h2子元素来使用”，而是指“当div元素中的第奇数个子元素是h2子元素的时候使用。”(demo的话h2,p相互交错，h2都在奇数位置。)
nth-of-type与nth-last-of-type可以避免这类问题的发生。使用这两个选择器的时候，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对同类型的子元素进行计算了。
/*选择器写法示例*/ h2:nth-of-type(odd) //第偶数个h2子元素 h2:nth-of-type(even) //第奇数个h2子元素
新增结构伪类选择器列表： E:root： 匹配E所在文档的根元素 E:nth-child(n)： 匹配元素类型为E且是父元素的第n个子元素 E:nth-last-child(n)： 匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反） E:nth-of-type(n)： 匹配父元素的第n个类型为E的子元素 E:nth-last-of-type(n)： 匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反） E:first-of-type： 匹配父元素的第一个类型为E的子元素 E:last-child： 匹配元素类型为E且是父元素的最后一个子元素 E:last-of-type： 匹配父元素的最后一个类型为E的子元素 E:only-child： 匹配元素类型为E且是父元素中唯一的子元素 E:only-of-type： 匹配父元素中唯一子元素是E的子元素 E:empty： 匹配不包含子节点(包括文本)的E元素 |
表单问题：
10. 微信--disabled问题：
将input或textarea设置为disabled后，在iphone手机上样式将被覆写-webkit-appearance:none; 文字的颜色还是灰色。------iphone点击无反应
input:disabled, textarea:disabled {
color: red;
opacity: 1;
-webkit-opacity: 1;
-webkit-text-fill-color: #000;
}
11. ios手机设置input为readonly后，仍会获得焦点弹起软键盘
---如果设置disabled，ios点击input无反应，点击事件不会触发
12. 同时给元素input加disabled和readonly，会使颜色变浅
13. Input：iOS默认有border-radius
14. Placeholder样式修改&&伪类&&伪元素：
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#666;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#666;
}
===========知识点=========
知识点：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
css伪类：CSS 伪类用于向某些选择器添加特殊的效果。
css伪元素：CSS 伪元素用于向某些选择器设置特殊效果。
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。
但是伪类兼容现存样式，浏览器需要同时支持旧的伪类， 如:first-line,:first-letter,:before,:after等等。因此对于css2之前已经有的伪元素两种写法的作用是一样的，但是为了兼容IE浏览器还是使用单冒号的写法。
15. select下拉框：安卓会有黑色背景
16. 下拉选择框文本设置向右对齐，带有特殊符号的值顺序是反向的
下拉选择框文本设置默认向左：
下拉选择框文本设置向右：direction: rtl;
如果希望改变纯内联内容的顺序，需要配合unicode-bidi属性。
---------暂未找到相关解决方案
17. 给input[type=”button”]的按钮加disabled属性，苹果会将按钮设置成不可点状态（样式：透明度降低），不同于安卓，安卓设置成不可点状态，但不会改变其透明度
18. html按钮button怎么加超链接
1.如果让本页转向新的页面则用：
window.location.href('连接')">
2.如果需要打开一个新的页面进行转向，则用：
window.open('连接')">
19. Jquery attr("checked") 返回checked或undefined 获取选中失效
$('#cb').attr('checked'); 返回的是checked或者是undefined，不是原来的true和false了。
并且checked属性在页面初始化的时候已经初始化好了，不会随着状态的改变而改变。所以如果checkbox一开始是选中的，那么返回的是checked，如果一开始没被选中，则返回的是undefined。
解决的方法是：
复制代码 代码如下:
分析了其中的原因，可以这样理解：
它将“属性”与“特性”做了区别，属性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性
复制代码 代码如下:
$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT
20. 移除HTML5 input在type="number"时的上下小箭头
第一种方案：
A.在chrome下：
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
B.Firefox下：
input[type="number"]{-moz-appearance:textfield;}
第二种方案：
* 将type="number"改为type="tel"，同样是数字键盘，但是没有箭头，ios键盘无金额小数点。
21. 设置被禁用的输入框的样式 (Access the disabled Textboxes)
有时候，被禁用的文本输入框的背景可能让你的用户觉得不爽，因为默认是灰色的，下面是如何修改被禁用的文本框的方法：
?
1 2 3 4 |
input[disabled]{ color:red; background:transparent; } |
22. 修改被选择文本的颜色 (Change the default selection text color)
当用户选择了网页上的一段文本时，你想修改被选择文本的颜色，可以使用下面代码，不过只支持基于 Webkit 的浏览器，例如 firefox：
?
1 2 3 4 5 6 7 8 9 10 11 12 |
::selection{ background-color:orange; color:green; } ::-moz-selection{ background-color:orange; color:green; } ::-webkit-selection{ background-color:orange; color:green; } |
表格问题：
23. IE浏览时，html table单元格内没有内容时，边框显示不出来，怎么能显示出来？
table{border-collapse:collapse;}
td{border:1px solid #000;}
24. Table表格td固定宽度，一行显示，多出字符省略号显示
样式1：
Table{
table-layout: fixed;
}
样式:2：
Td{
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*-webkit-line-clamp: 1;*/
}
问题描述1： 给表格td固定宽度，然后设置一行省略号显示，设置无效。
展示效果1： td固定宽度无效，一行显示有效，省略号显示无效
问题描述2： 去掉overflow:hidden
展示效果2： td固定宽度有效，其他都无效，会一行显示，高度会撑高
Css3问题&兼容问题：
25. Background:url(); 未设置图片路径问题
---写css样式文件中，不能存在background:url()，图片路径未设置，否则会出现问题，且无法在浏览器中编辑修改样式：
26. border-image属性
一、border-image的兼容性
border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。
二、熟悉border-image的一些特性
我们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-repeat;
指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。
border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。
具体描述border-image的参数
border-image的参数就是上面提到的三个：图片，剪裁位置，重复性。
1、图片(border-image-source)
与CSS2中background-image属性一样，border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none;
2、图片剪裁位置(border-image-slice)
此参数特点比较鲜明：
1、没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。
2、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，但是在border-image效果的实现上来说，就好像是个剪裁工具，把边框图片四分五裂，再重新安置，变形。其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%的”示意可以用下图表示：
看图说话就是，离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格，这是下面深入讲解border-image的基础。
3、重复性(border-image-repeat)
这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。
参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平铺），垂直方向repeat（重复），至于何为平铺何为重复下面会深入讲解。
三、深入理解border-image的宽度和展示方式
分开理解border-image的宽度或是展示方式其实不太难的，关键是这两者结合使用时候的含义，需要花一定的功夫的理解。
帮助理解的九宫格模型
何为九宫格？为什么我们需要九宫格帮助理解？
“九宫格”是我国书法史上临帖写仿的一种界格，又叫“九方格”，即在纸上画出若干大方框，再于每个方框内分出九个小方格，以便对照法帖范字的笔画部位进行练字。在本文，“九宫格”就专指由九个方格形成的矩形布局，例如左图就是一个很简单的数字九宫格。
border-image的数值参数其实是用来剪裁边框图片的，正好“哗哗四刀”切出了个九宫格的模型，所以，有意或无意，巧合还是必然，我们需要用到九宫格模型帮助我们理解border-image的绘制原理。下面这张图是本文非常重要的基本的示意图，因为这是张具有代表性的九宫格图案(27*3)*(27*3)。
<————————>
这张图能够帮助我们更好的理解border-image的剪裁及绘制的原理。
边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。假设现在边框的宽度是27像素，则上面所说的九部分正如下图所表示的（放大400%）：
左图中，橙红色的四个边角的菱形区域称为“角边框图片”，在border-image中，角边框图片是没有任何展示效果的，不会平铺，不会重复，也不会拉伸，有点类似于视觉中盲点的意思。
而对边的四个橙黄色区域属于展示效果的作用区（也是边框宽度计算剩余区），上下区域即border-top-image和border-bottom-image区域受到展示效果属性的第一个参数——水平方向效果影响：如果为repeat，则此区域图片会水平重复，如果是round，则此框框内的图片会水平平铺，如果是stretch，则此矩形域中的图片就会被水平拉伸。（下部分的实例会做具体演示）左右区域只有垂直方向上的效果，与上下区域效果对应，不多说。
中间的区域（左图的空白格）受到全部参数的作用，在水平和垂直两个维度上都有展示效果（平铺、拉伸等）。
border-image绘制原理简述
我是这样理解的：共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。这是理解绘制原理的基础。
1、调用边框图片
border-image的url属性，通过相对或绝对路径链接图片。
2、边框图片的剪裁
border-image的数值参数剪裁边框图片，形成九宫格。
3、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。
四、border-image的一些应用
自适应的圆角效果
使用图片如下：
此图片的剪裁宽度为20像素，基本上就是此图的圆角大小。div的边框宽度为10像素，其CSS核心样式如下：
.border_image{
-moz-border-image:url(../image/rounded_corner.png) 20/10px;
-webkit-border-image:url(../image/border.png) 20/10px;
}
结果如下：
多边框效果
使用图片如下：
圆角和边框大小都是20，就不上CSS代码了，大同小异。终效果如下图：
投影效果
使用素材图片如下：
剪裁宽度和边框宽度都是2 5 6 2，这里的投影我直接使用photoshop的投影样式生成的，发现用在边框投影上有一点点不足，需要手动调整，截取投影的四边，以及重复区域再拼合一下，您可以自己试试如果实现最佳的投影效果。
效果如下图：
选项卡
自适应选项卡，CSS2中实现自适应选项卡需要将背景图片制作的较长，而且需要两层标签，但是在CSS3中，图片要短，且一个标签就可以搞定。例如，这是淘宝新首页搜索选项卡的背景图片（已剪裁），，要是使用border-image，只要值么点图就可以了，
边框图片剪裁大小和边框宽度都是5 5 0；底边为0，其余都是5像素，结果效果为：
-webkit-tap-highlight-color: transparent; //Mobile上点击链接高亮的时候设置颜色为透明
-webkit-user-select: none; //设置为无法选择文本
-webkit-touch-callout: none; //长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片
27. 获取元素的offset值，出现的问题：
1.如果元素设置了display:none，则无法获取到offset的值
2.如果元素设置了transform: translate(x,y)，则无法获取到正确的offsetTop和offsetLeft值，而是偏移前的值
浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。
这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争
28. CSS Hack
我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.
CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。
(1)IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。
(2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important FireFox不能识别 * _ \9
可以先使用“\9"标记，将IE分离出来，再用”*"分离出IE6/IE7，最后可以用“_”分离出IE6
.type{
color: #111; /* all */
color: #222\9; /* IE */
*color: #333; /* IE6/IE7 */
_color: #444; /* IE6 */
}
所以可以按着优先级就能给特定的版本捎上特定颜色
一般来说，只有IE6不支持 !important
所以可以这样
#example{
width: 100px !important; /* IE7 FF */
width: 110px; /* IE6 */
}
因为!important 具有最高优先级，所以此种方式可以区别出来~
为什么说一般呢...你看看下面这个例子，IE6貌似还认得出!important
h1{color: #f00 !important; }
h1{color: #000;}
h2{color: #f00 !important; color: #000;}
test1
test2
(3)选择器前缀法，顾名思义，就是给选择器加上前缀。
IE6可识别 *div{color:red;}
IE7可识别 *+div{color:red;}
29. 主要的兼容问题：
(1)最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善。
贴一个淘宝的样式初始化~
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
(2)IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行
IE6下左边的双边距 ~
IE7的没问题 ~
解决的方式有两个：
1.给float元素添加display：inline 即可正常显示
2.就是hack处理了，对IE6进行 _margin-left:5px;
(3)跟上述差不多，也属于IE6双边距bug: 行内属性标签，为了设置宽高，我们经常就会设置成display：block; 这样一来就产生上述的问题。
解决办法也是天津display：inline; 但是这样一来我们就不能设置宽高了，所以呢需要再加个 display:table.
所以你设置display:block后，再添上display:inline和display:table
(4)上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。
.box1{width: 200px;height: 200px; border: 1px solid #333; }
.mt{margin-top: 10px;}
.mb{margin-bottom: 10px;}
看吧，本来该20px的现在它只有10px
解决办法就是不要同时采用top和bottom ,统一一些~
(5)有些浏览器解析img标签也有不同，img是行内的，一般都会紧接着排放，但是在有些情况下还是会突然出现个间距，解决办法是给它来个浮动 float
(6)标签属性min-height是不兼容的，所以使用的时候也要稍微改改。这样吧：
.box{min-height:100px;height:auto !important; height:100px; overflow:visible;}
另一方面，IE是不支持min-height这类属性的，所以有些时候也可以考虑使用CSS表达式
#container{
min-width:600px;
width: expression(document.body.clientWidth < 600? "600px":"auto");
}
(7)很多时候可能会纳闷超链接访问过后 样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。一般来说，最好按照这个顺序：L-V-H-A
简单的记法是 love hate
a:link{} a:visited{} a:hover{} a:active{}
(8)chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：
-webkit-text-size-adjust: none;
(9)png24位的图片在IE6下面会出现背景，所以最好还是使用png8格式的
(10)因为存在两种盒子模式：IE盒子模式和W3C标准模式，所以对象的实际宽度也要注意。
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度=
(margin-left) + (border-left-width) + (padding- left)
+ width + (padding-right) + (border-right-width) + (margin-right)
(11)鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
(12)有个说法是：FireFox无法解析简写的padding属性设置。
如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。但我试了一下，发现还是可以解析的，难道是版本的原因？
(13)消除ul、ol等列表的缩进时，样式应写成:
list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
(14)CSS控制透明度问题opacity：
Div{
opacity: 0.6 ; //chrome
-moz-opacity: 0.6; //firefox
filter: alpha(opacity=60); //除IE6的IE
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); //IE6
}
(15)有些时候图片下方会出现一条间隙，通常会出现在FF和IE6下面比如
一般给img添加vertical-align属性即可，比如top middle
img{verticle-align:center;}
(16)IE6下div高度无法小于10px
比如定义一条高2px的线条，FF和IE7都正常
但IE6就是10px
解决的办法有两种：添加overflow属性或设置fontsize大小为高度大小 如：
30. 如何在网页上给flash动画加上链接
通常，我们给flash动画加链接，是在flash内部加的，直接用flash的ActionScript中的url方法可以轻松搞定。但是那样会带来一些使用上出现的问题，譬如它作为一个广告flash，有时候需要更换链接来宣传不同的产品，如果每次都要重新修改flash，就会使设计人员浪费额外的时间来操作这个事情；另一方面，点击flash内部链接打开另一个页面，那么那个页面是统计不出点击来路的，而是视为直接输入。
为了解决上述的问题，我们需要在网页上也就是flash外部给flash添加链接，简单的说，就是把flash视作一张图片的效果。
下面是我在网上找到的几个方法，经过测试是可行的。
(1).为flash新增透明层
(▲点击Flash)原理是定义一个与flash等高等度的链接标签a，然后通过css把标签a定位到flash上面进行透明覆盖。上面这个html方式给flash加链接的代码如下：
卡卡网速测试'>
(2).用按钮控件BUTTON 来实现
具体步骤
1.直接在按钮上加上onClick事件打开指定页面：
2．方法1中的代码运行后单击按钮时，按钮中的Flash有个下沉的动作，如果要取消这个动作，可以禁止按钮的交互性，然后用标准的A标签做链接，代码如下：
http://www.flash8.com" hidefocus>
" width="225" height="76">
value="http://www.flash8.net/images/head/bbs.swf">
" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="225" height="76" wmode="Opaque">
注意：必须设置 Flash 对象的 wmode 属性值为 Opaque。
技巧：方法1中代码第二行的_blank参数可以去掉或者修改为_self让链接在当前窗口打开。
特别提示：代码运行后，在Flash上单击，将打开代码中指定的URL。
特别说明
本例问题的解决，主要是利用Flash对象的wmode属性和BUTTON标签的特性。设置Flash对象的wmode属性值为opaque，是为了降低Flash对象的优先级，然后利用BUTTON标签把Flash对象渲染为一个按钮，这样就可以通过设置BUTTON对象的样式或事件来解决问题。
31. 512网页置灰代码
方法1：支持IE
“-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
”http://www.w3.org/1999/xhtml”>
说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。
方法2：支持IE
body {filter:gray}
说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。
提示：虽然这个方法代码量最小，但是效果却不好，而且网页也比较卡。
方法3：同时支持IE、Safari和Chrome
说明：此方法支持IE浏览器、Safari和Chrome等浏览器，但是不支持Firefox浏览器。
方法4：使用grayscale.js插件
使用grayscale.js插件。这个插件是模拟IE的filter:progid方，官网地址在：
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
使用方法：
说明：支持IE、Safari、Chrome、Opera和Firefox等浏览器。
问题：这个在IE下也挺占资源的。
建议：使用方法3，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。