css3命令

A. sublime text3有哪些html5和css3插件支持代码提示和自动补全

Alt+.：闭合标签
另外
Ctrl+Shift+P：打开命令面板
Ctrl+P：搜索项目中的文件
Ctrl+G：跳转到第几行
Ctrl+W：关闭当前打开文件
Ctrl+Shift+W：关闭所有打开文件
Ctrl+Shift+V：粘贴并格式化
Ctrl+D：选择单词，重复可增加选择下一个相同的单词
Ctrl+L：选择行，重复可依次增加选择下一行
Ctrl+Shift+L：选择多行
Ctrl+Shift+Enter：在当前行前插入新行
Ctrl+X：删除当前行
Ctrl+M：跳转到对应括号
Ctrl+U：软撤销，撤销光标位置
Ctrl+J：选择标签内容
Ctrl+F：查找内容
Ctrl+Shift+F：查找并替换
Ctrl+H：替换
Ctrl+R：前往 method
Ctrl+N：新建窗口
Ctrl+K+B：开关侧栏
Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
Ctrl+F2：设置/删除标记
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Alt+.：闭合标签
Alt+Shift+数字：分屏显示
Alt+数字：切换打开第N个文件
Shift+右键拖动：光标多不，用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl，依次点击或选取，可需要编辑的多个位置
按Ctrl+Shift+上下键，可替换行
Sublime Text插件：
建议先启用Package Control，作用是安装插件时很方便，启用方法：菜单栏 – View – Show Console，贴入以下代码并回车，然后重启Sublime。如果你所在的网络无法启用，则无法使用，手动搜索下载去吧。

B. 如何解决IE浏览器的兼容性 div+css

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。随着浏览器版本的增多，解决IE浏览器兼容性显得尤为重要.
一、!important (功能有限)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:
#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
二、CSS HACK的方法(新手可以看看，高手就当路过吧)
首先需要知道的是：
所有浏览器 通用 height:
100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height:
100px;
IE7、FF 共用 height: 100px
!important;
例如：
#example { height:100px; } /*FF */
* html #example {height:200px; } /* IE6 */
*+html #example {height:300px; } /* IE7 */
下面的这种方法比较简单
举几个例子：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面
解释一下4的代码：
读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px
到了第二行*height:300px; FF不认识这个属性，IE6IE7都认，所以FF还显示100px，而IE6 IE7把第一行得到的height属性给覆盖了，都显示300px
到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px
这样，三个浏览器都有自己的height属性了，各玩各的去吧
这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。
哦，差点忘了说了：
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：
〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"〉
三、使用IE专用的条件注释
〈!--其他浏览器 --〉
〈linkrel="stylesheet" type="text/css" href="css.css" /〉
〈!--[if IE 7]〉
〈!-- 适合于IE7 --〉
〈linkrel="stylesheet" type="text/css" href="ie7.css" /〉
〈![endif]--〉
〈!--[if lte IE 6]〉
〈!-- 适合于IE6及以下 --〉
〈linkrel="stylesheet" type="text/css" href="ie.css" /〉
〈![endif]--〉
貌似要编三套css，我还没用过，先粘过来再说
IE的if条件Hack
1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉
2. 〈!--[if IE]〉 所有的IE可识别
〈![endif]--〉
3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别
〈![endif]--〉
4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉
5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉
6. 〈!--[if IE 6]〉 仅IE6可识别
〈![endif]--〉
7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉
9. 〈!--[if IE 7]〉 仅IE7可识别
〈![endif]--〉
10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]--〉注:gt = Great Then 大于
〉 = 〉 大于号
lt = Less Then 小于
〈 = 〈 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于
四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
〈div 〉some text here〈/div〉
在body表现这里加入lang属性,中文为zh：
〈body〉
现在对div元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
五、FLOAT闭合（clearing float）
网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：
1、给父DIV也设上float(不要骂我，我知道是废话)
2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
〈divclass="parent"〉
〈div class="son1"〉〈/div〉
〈div class="son2"〉〈/div〉
〈div class="clear"〉〈/div〉
〈/div〉
3、万能 float 闭合
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
〈style〉
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
〈/style〉
:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。
4、overflow:auto（刚看到的，极力推荐）
只要在父DIV的CSS中加上overflow:auto就搞定。
举例：
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
〈divclass="parent"〉
〈div class="son1"〉〈/div〉
〈div class="son2"〉〈/div〉
〈/div〉
作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。
我试了一下，其实不加"_height:1%“在IE下也行，留着吧。
六、需要注意的一些兼容细节
1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.
解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。
2, 页面居中问题.
body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。
解决办法：加上"MARGIN-RIGHT:auto; MARGIN-LEFT: auto; "
3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。
解决办法：试试在有空隙的DIV上加上"font-size:0px;"
4, 关于手形光标. cursor: pointer.而hand 只适用于 IE.
5, 浮动IE6产生的双倍距离
#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离
解决办法：加上display:inline，使浮动忽略
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。
解决办法：为了让这一命令在IE上也能用，可以把一个〈div〉 放到 〈body〉 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7、UL和FORM标签的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；
解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.
8 ,DIV浮动IE文本产生3象素的bug
下面这段是我在网上粘过来的
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
〈DIV id=box〉
〈DIV id=left〉〈/DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉
针对上面这段代码，下面说一下我的理解：
第一、只要right定义了width属性，在FF下绝对就会两行显示
第二、两个width都定义为百分比的话，就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你width定义的是数值才用得上。
所以说上面这段代码其实用处不大，至少在FF下不行。其实只要只定义left的width就行了，right不定义width就不管在IE还是FF下都能成功，但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了，真磨叽！
9,截字省略号
.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意Firefox并不支持。

C. 网页的背景图片怎么设置渐变啊。菜鸟。谁给个具体命令啊。 网站是动易的，用CSS

它背景原来就是用一张渐变的图片，而不是用命令的。通常的做法是做一张宽度为1像素，高度比浏览器高度大（具体高多少自己定，例如2000像素）的从上往下渐变的图片，当做背景图片，设置背景图片x方向重复（横向重复）显示，就可以了。例如：<bodybackground="bg.jpg"style="background-repeat:repeat-x;">

D. 如何处理CSS3属性前缀

使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？

我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有：

Trident内核：主要代表为IE浏览器

Gecko内核：主要代表为Firefox

Presto内核：主要代表为Opera

Webkit内核：产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

Trident内核：前缀为-ms

Gecko内核：前缀为-moz

Presto内核：前缀为-o

Webkit内核：前缀为-webkit

来看一个简单的示例，早期写一个圆角border-radius，需要这样写：

.box{
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

这样编写代码，无形之中给前端人员增加了不少工作量，于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别？”

-prefix-free

.box{
border-radius:5px;
}

各主流浏览器就能正常的解析。造成这个原因的时，Compass中的CSS3的mixin没有跟上步子去更新定义好的mixins

E. 关于html5和css3的页面上的问题

单从你上面所截图并看不出来是怎么得来的圆圈，请在网上移动到dl标签上看看是否写了命令

存用css3写的话，必须有两个圆圈组合，大圆是半透明的，小圆是不透明的，例如

<dl class="one">
<dt>111</dt>
</dl>

css：

*{ margin: 0; padding: 0;}
body{ font-size:70%; font-family: verdana, hevetica, arial, sans-serif;}
.one{
border:solid 0px #ccc;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50px;
opacity: 0.3;
position: relative;
top:50px;
left: 100px;
}
.one dt{
width: 90px;
height: 90px;
line-height: 90px;
background: #111;
border-radius: 45px;
text-align: center;
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}

我这个是在火狐浏览的要兼容各浏览器要写内核前缀，，切记~

F. css unset ie不支持怎么解决

1.对于在IE下不兼容overflow:hidden;而FF下兼容的情况
加一个 position:relative; 或者 *position:relative; /* for IE6,IE7*/ 就可以了

CSS技巧
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如：

<#div id=”imfloat”>
相应的css为
#imfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
4 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个＜div> 放到 ＜body> 标签下，然后为div指定一个类,然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id=”box”>
<div id=”left”>＜/div>
<div id=”right”>＜/div>
</div>
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度
①例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 ＜#div class=”floatB”> ＜#div class=”NOTfloatC”>之间加上 ＜#div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这 样就达到了兼容。
例如某一个wrapper如下定义：

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成 float,所以我们应该这样解决

<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.

/* Clear Fix */
.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
9．高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id=”box”>
<p>p对象中的内容＜/p>
</div>
解决技巧：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
10 .IE6下为什么图片下有空隙产生
解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top
bottom middle text-bottom 都可以解决.
11.如何对齐文本与文本输入框
加上 vertical-align:middle;

<style type=”text/css”>
<!–
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
–>
</style>
12.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如 div id=”aa” 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
13. LI中内容超过长度后以省略号显示的技巧
此技巧适用与IE与OP浏览器

<style type=”text/css”>
<!–
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
–>
</style>
14.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
<!–
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
–>
＜/style>
15.为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px
16.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明

<param name=”wmode” value=”transparent” />
17.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

<style type=”text/css”>
<!–
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
–>
</style>
FF与IE
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
Code:

<style type=”text/css”>
<!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
</style>
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.
7. BOX模型解释不一致问题
在FF和IE中的BOX模型解释不一致导致相差2px解决技巧：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
9.最狠的手段 – !important
如果实在没有办法解决一些细节问题,可以用这个技巧.FF对于”!important”会自动优先解析,然而IE则会忽略.如下

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
10.IE,FF的默认值问题
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然 也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色 或者系统颜色来显示，div或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东 西出现 FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪 罪IE了。
11.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

{
height:auto!important;
height:200px;
min-height:200px;
}
12.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入
的技巧来解决

<style type=”text/css”>
<!–
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
–>
</style>

<div id=”ff”>aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

<scrīpt type=”text/javascrīpt”>
/* <![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</scrīpt>
13.为什么IE6下容器的宽度和FF解释不同呢

<?xml version=”1.0″ encoding=”gb2312″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
<!–
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
–>
</style>
<div ōnclick=”alert(this.offsetWidth)”>让FireFox与IE兼容＜/div>
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考相关资料。
IE6,IE7,FF
IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种，是使用IE专用的条件注释

<!–其他浏览器 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />

<!–[if IE 7]>
<!– 适合于IE7 –>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>

<!–[if lte IE 6]>
<!– 适合于IE6及一下 –>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
第三种，css filter的办法，以下为经典从国外网站翻译过来的。.
新建一个css样式如下：

#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：

<div id=”item”>some text here＜/div>
在body表现这里加入lang属性,中文为zh：

<body lang=”en”>
现在对div元素再定义一个样式：

*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好

G. 求dw cs5绿色版能支持html5 和css3 的代码提示

H. css3如何预加载字体

之前如果想在自己的网站使用某些好看的字体，总是迫不得已得在PS里先把字体图片做好。虽然这样做也能达到我们想要的效果，但是这样就增加了HTTP请求（如果在多处使用的话），即使合并所有图片，也不好管理，灵活性不高，哪一天想换种更好看的字体，那工作量，想想都没劲！幸好CSS3新增了@font-face模块，可以帮助我们轻松解决Web页面中使用优雅字体的方式，而且我们可以根据需要自定义多种字体，但是每个@font-face只能定义一种，若需要多个字体就启用多个@font-face规则。
@font-face 主要就是把自己想要的，或者自己定义的Web字体嵌入到Web页面中，然后这些字体就会被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存，使用它来修饰文本。也就是我们所说的Web字体嵌入。
@font-face 语法：
font-family : 其属性值指定的是自定义的字体名称，最好就是直接使用下载字体的默认文件名，然后需要将它引用到元素的font-family中。虽然自定义了自己想要的字体，但是也得在元素中使用它才有效果。【必选属性】
src : 其属性值指定自定义字体的存放路径，可以是相对路径或者绝对路径。format()指定的是自定义的字体格式，主要用来帮助浏览器识别，主要有：truetype，opentype，truetype-aat，svg，embedded-opentype等类型。【必选属性】
font-weight 和 font-style ：分别用来指定字体是否加粗和定义字体样式。当然还可以设置font-size等字体属性。【可选属性】

I. vim 里边有没有html5 css3自动完成插件

作为一名开发者，应该对编辑器之神Vim与神之编辑器Emacs有所耳闻吧。编辑器之战的具体细节有兴趣的童鞋可以google之。

Vim最大的特点是打开速度快，功能强大，一旦掌握了其中的命令，编程过程双手就不需要离开键盘了。

用习惯了Vim的另一个好处是在linux下可以很轻松地用vi来处理文件，当然emacs也可以做默认编辑器，但是不是每台机器都有安装Emacs。

今天主要给大家介绍Vim在前端领域的一些常用插件：

1.mark.vim

mark.vim主要的功能是变量的高亮。

选中要高亮的词，使用 m 来使其高亮，多个词的高亮会显示为不同的颜色，在不需要查找的时候以及代码review的时候使用效果还是挺不错的，

使用 可以去除所选的词的高亮。

更多详情可以点击插件主页了解。

ps: 查找单词可以使用 * 这个命令来进行快速搜索

2.zencoding.vim

zencoding.vim后来改名为Emmet.vim，主要功能是实现代码的快速编写。

具体教程可以参见官方的网站

个人感受是做页面重构的时候用得比较多，通过命令可以快速生成html的结构，提高了前端开发的生产力。

3.ctrlp.vim

ctrlp.vim主要功能是对文件以及buffer进行模糊查询，快速打开文件。

操作实例如下图所示：

在没有这款插件前，原生命令一般是进行块操作，在可视模式下对多行进行操作。步骤比较冗长，也容易出错，

这款插件可真谓利器啊，同时它还支持正则的操作呢。

7.commentary.vim

commentary.vim主要功能是可以批量注释单行或多行以及去除注释；

绑定退格键，选择多行可以直接以/**/的形式注释代码

最后，几款插件都是在前端开发中经常用到的，还有很多功能，原生的一些命令还是可以做的，

另外用Vim还有一个好处是从写C到写PHP再到写JS，都可以用同一个编辑器，还是挺方便的。

快捷键神马的自己在vimrc中配置即可，

J. 有没有关注html5和css3

本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢?
有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3我们能做些什么。
什么是HTML5和CSS3
HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了，为什么我们要单独使用CSS呢，HTML不是一样可以控制Web页面的显示效果么?为了回答这个问题，我举个简单的例子：
有没有发现如果一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息?页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。
HTML5和CSS3是HTML和CSS的最新版本，它们目前均未确定标准，但是已经公布的新特征已经让我们心动不已。
HTML 5的新特新
1. 新的内容标签
HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。
2. 更好的表格体系
现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。
3. 音频、视频API
HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。
4. 画布(Canvas) API
在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。
5. 地理(Geolocation) API
HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。
6. 网页存储(Web storage) API
HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。
7. 拖拽释放(Drag and drop) API
我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。
CSS3 新特性
1. RGBa
CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。
2. Multi-column layout
CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。
3. Round corners
圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。
4. @font-face
当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。
5. 其他特性
此外，CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。
利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也可以被搜索引擎检索到。