CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
三、其他兼容技巧
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释
#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-}
4 浮动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;
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;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
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代码
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：
p对象中的内容
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
每次要找个东西都得慢慢去翻自己收集的一些东西,每次都是那么花时间,再加上有时存放时间久远就忘了当时是存在哪了,为了方便查询及阅读,决定把一些Css Hack 收集起来…
1.区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF * √ √ × !important × √ √
另外再补充一个，下划线"_",
IE6支持下划线，IE7和FF均不支持下划线。
于是大家还可以这样来区分IE6，IE7，FF
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是FF的写在前面，IE7的写在中间，IE6的写在最后面。
2.!important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
3.IE6/IE7对FF
1.*+html 与 *html 是IE特有的标签, firefox 暂不支持.
而*+html 又为 IE7特有标签.
2.表达方式：+property:value
测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：
IE5，IE6 ，IE7浏览器识别；
FF2.0，Opera 9，Safari 2浏览器不识别。
结论：我们可以用"+"来实现只有IE识别的CSS Hack。
比如我们要实现在IE中500px的宽度，而在其他浏览器480px的宽度，就可以通过"+" Hack来完成，如下：
#hack {
width:500px;
+width:480px; /*only IE*/
}
3.用于内联css
##wrapper {
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
}
5.IE7的hack
>body
html*
*+html
这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。 对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。
6.IE6 不能识别
html/* */ >body #box { color: red; } IE6 字体不会变成红色
7.屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;}
/*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty {font:12px !important;}
/*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
8.仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
9.仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
10.IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {…}
这句与上一句的作用相同。
11.仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
12.仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
13.仅IE5不识别，屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
14.盒模型解决方法
select {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
15.盒模型解决方法
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
16.只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
17.IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
18.IE5/MAC的过滤器，一般用不着
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
忽视右键
或
如何几秒后转到别的页面？
点击关闭窗口
请问如何去掉主页右面的滚动条？
请问如何做到让一个网页自动关闭.
这个窗口会在10秒过后自动关闭,而且不会出现提示.
如何在不刷新页面的情况下刷新css?
请问如何让网页自动刷新？
在head部记入其中20为20秒后自动刷新，你可以更改为任意值。
如何让页面自动刷新？
方法一，用refresh
HTML 代码片段如下:
5表示刷新时间
[Ctrl+A 全部选择 提示:你可先修改部分代码，再按运行]
方法二，使用setTimeout控制
如何让超链接没有下划线
在源代码中的…之间输入如下代码：
请问如何去掉IE的上下滚动条？
怎样才能把RealPlayer文件在网页做一个试听连接？
如何进入BIOS设置程序
如何进入BIOS设置？
不同的BIOS有不同的进入方法，通常会在开机画面有提示。
Award BIOS：按“Del”键
AMI BIOS：按“Del”或“ESC”键
Phoenix BIOS：按“F2”键
常备小资料！三种主流BIOS报警声音大全
有时候，我们的计算机不能正常启动，并且发出长短不一的蜂鸣声，这代表计算机出现故障，需要我们来排除。蜂鸣声是计算机BIOS预选设计好的提示音，我们可以根据以下内容来判断究竟是那里出了问题。
目前常见的BIOS有AWARD、AMI和POENIX三种，其中POENIX已经被AWARD收购，但在很多老品牌机中很常见，所以这里一起列出。除了以上列出的三种BIOS以外，还有极少数电脑使用特殊的BIOS，由于没有统一标准，这里不再列出。
AWARD BIOS响铃声的一般含义是：
1短: 系统正常启动。这是我们每天都能听到的，也表明机器没有任何问题。
2短: 常规错误，请进入CMOS Setup，重新设置不正确的选项。
1长1短: RAM或主板出错。换一条内存试试，若还是不行，只好更换主板。
1长2短: 显示器或显示卡错误。
1长3短: 键盘控制器错误。检查主板。
1长9短: 主板Flash RAM或EPROM错误，BIOS损坏。换块Flash RAM试试。
不断地响（长声）: 内存条未插紧或损坏。重插内存条，若还是不行，只有更换一条内存。
不停地响: 电源、显示器未和显示卡连接好。检查一下所有的插头。
重复短响: 电源问题。
无声音无显示: 电源问题。
AMI
AMI BIOS响铃声的一般含义是：
1. 一短声，内存刷新失败。内存损坏比较严重，恐怕非得更换内存不可。
2. 二短声，内存奇偶校验错误。可以进入CMOS设置，将内存Parity奇偶校验选项关掉，即设置为Disabled。不过一般来说，内存条有奇偶校验并且在CMOS设置中打开奇偶校验，这对微机系统的稳定性是有好处的。
3. 三短声，系统基本内存（第1个64Kb）检查失败。更换内存吧。
4. 四短声，系统时钟出错。维修或更换主板。
5. 五短声，CPU错误。但未必全是CPU本身的错，也可能是CPU插座或其它什么地方有问题，如果此CPU在其它主板上正常，则肯定错误在于主板。
6. 六短声，键盘控制器错误。如果是键盘没插上，那好办，插上就行；如果键盘连接正常但有错误提示，则不妨换一个好的键盘试试；否则就是键盘控制芯片或相关的部位有问题了。
7. 七短声，系统实模式错误，不能切换到保护模式。这也属于主板的错。
8. 八短声，显存读/写错误。显卡上的存贮芯片可能有损坏的。如果存贮片是可插拔的，只要找出坏片并更换就行，否则显卡需要维修或更换。
9. 九短声，ROM BIOS检验出错。换块同类型的好BIOS试试，如果证明BIOS有问题，你可以采用重写甚至热插拔的方法试图恢复。
10. 十短声，寄存器读/写错误。只能是维修或更换主板。
11. 十一短声，高速缓存错误。
12. 如果听不到beep响铃声也看不到屏幕显示，首先应该检查一下电源是否接好，在检修时往往容易疏忽，不接上主板电源就开机测试。其次得看看是不是少插了什么部件，如CPU、内存条等。再次，拔掉所有的有疑问的插卡，只留显示卡试试。最后找到主板上清除（clear）CMOS设置的跳线，清除CMOS设置，让BIOS回到出厂时状态。如果显示器或显示卡以及连线都没有问题，CPU和内存也没有问题，经过以上这些步骤后，微机在开机时还是没有显示或响铃声，那就只能是主板的问题了。
POENIX（凤凰）
POENIX的BIOS报警声（以前的老板上有许多POENIX的，可现在已经被AWARD收购了）
1短 系统启动正常
1短1短1短 系统加电初始化失败
1短1短2短 主板错误
1短1短3短 CMOS或电池失效
1短1短4短 ROM BIOS校验错误
1短2短1短 系统时钟错误
1短2短2短 DMA初始化失败
1短2短3短 DMA页寄存器错误
1短3短1短 RAM刷新错误
1短3短2短 基本内存错误
1短3短3短 基本内存错误
1短4短1短 基本内存地址线错误
1短4短2短 基本内存校验错误
1短4短3短 EISA时序器错误
1短4短4短 EISA NMI口错误
2短1短1短 前64K基本内存错误
3短1短1短 DMA寄存器错误
3短1短2短 主DMA寄存器错误
3短1短3短 主中断处理寄存器错误
3短1短4短 从中断处理寄存器错误
3短2短4短 键盘控制器错误
3短1短3短 主中断处理寄存器错误
3短4短2短 显示错误
3短4短3短 时钟错误
4短2短2短 关机错误
4短2短3短 A20门错误
4短2短4短 保护模式中断错误
4短3短1短 内存错误
4短3短3短 时钟2错误
4短3短4短 时钟错误
4短4短1短 串行口错误
4短4短2短 并行口错误
4短4短3短 数字协处理器错误
日志链接地址：http://www.blogms.com/blog/CommList.aspx?BlogLogCode=1001772827
原出处：http://hi.baidu.com/woaiyan5108/blog/item/8713c2dd97206aef76c6383c.html
base href的意思（相对链接）
以前用相对路径真是很麻烦，还有设置链接页的打开问题也都好麻烦，可是今天无意看一网站的源代码时候发现了这个，觉得很有用，所以贴出来给大家共享下，或许大家都知道了只有我不知道，嘿嘿，不过学习学习。。。。。。
就是指网页里面的相对链接的前缀url，如在
这个标签的用处是解决编程时候的相对路径问题，比如有的cms，因为每页路径不一样，他就给你生成sddsds之类的，如果我在本地调试，肯定会在本地开一个目录的，这样就乱了，你可以把它生成相对路径，如sddsds，只要在head部分加上
所以说，这个标签主要为了解决web编程的时候一些相对路径的问题。
当然，这个base还有一个用法，如在head部分加上这么一行：
CSS布局常用的方法
CSS布局常用的方法
float:none|left|right
取值：
none:默认值。对象不飘浮
left:文本流向对象的右边
right:文本流向对象的左边
它是怎样工作的，看个一行两列的例子
xhtml代码:
[code]
/*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/
[/code]
CSS代码:
[code]
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}
[/code]
position:static|absolute|fixed|relative
取值：
static:默认值。无特殊定位，对象遵循HTML定位规则
absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
它来实现一行两列的例子
xhtml代码:
[code]
[/code]
CSS代码:
[code]
#wrap{position:relative;/*相对定位*/width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
[/code]
他们的区别在哪？
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！
CSS常用布局实例
单行一列
[code]
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}
[/code]
两行一列
[code]
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
[/code]
三行一列
[code]
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
[/code]
单行两列
[code]#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
[/code]
两行两列
[code]
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
[/code]
三行两列
[code]
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}
[/code]
单行三列
绝对定位
[code]
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
[/code]
float定位一
xhtml代码:
[code]
/*用法web标准不建议，但是记住下面元素需要清除浮动*/
[/code]
CSS代码:
[code]
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
[/code]
float定位二
xhtml代码：
[code]
Thisisthemaincontent.
Thisistheleftsidebar.
Thisistherightsidebar.
[/code]
CSS代码：
[code]
body{
margin:0;
padding-left:200px;/*LCfullwidth*/
padding-right:190px;/*RCfullwidth CCpadding*/
min-width:200px;/*LCfullwidth CCpadding*/
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;/*LCwidth*/
right:200px;/*LCfullwidth*/
margin-left:-100;
}
#right{
width:190px;/*RCwidth*/
margin-right:-100;
}
[/code]
Web开发：非常实用的18条小经验
以下是我开发时碰到的问题以及心得经验，花了些时间调试，贴出来避免大家少走弯路。
1、xml文件尽量以utf-8编码，gb2312有些字是存储不了的，如?,就算能存也需要转换，比较麻烦，utf-8也符合国际规范。
2、CSS中:hover这个伪类，如果放在:visited前面则会失效。
3、标签如果没有href属性，所有对它的css的伪类如:hover均失效。
4、js文件中用document.wirte("
一般的文字截断（超出加省略号）
看到标题你一定很容易就会想到截断文字加“…”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像还有很多人不记得遇到这样的情况该如何处理。
[code]
text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
[/code]
对于表格文字溢出的定义：
[code]
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
[/code]
需要你注意的是，这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“…”，其它的浏览器文本超出指定宽度时会隐藏。
微软发布IE开发者工具条1.0正式版
在经历了一年半的测试期之后，微软周四正式发布了其IE Developer Toolbar最终正式版，支持IE6/7。微软开发者工具条可以让开发人员更为方便的分析网页结构，调整包括CSS在内的各种特定元素，帮助开发者更好地创建Web应用。
微软此次发布的1.0版相较Beta 3测试版并无新鲜元素加入，按照微软的说法，1.0版本主要改善了可靠性更适合作为一个正式版本来发布。
IEDeveloperToolbar特性如下：
－浏览和修改Web页的文档对象模型（DOM）。
－通过多种技术方式定位、选定Web页上的特定元素。
－禁止或激活IE设置。
－查看HTML对象的类名、ID，以及类似链接路径、tab顺序、快捷键等细节。
－描绘表格、单元格、图片或选定标签的轮廓。
－显示图片象素、大小、路径、替代文字等。
－即时重定义浏览器窗口大小到800×600或自定义大小。
－清空浏览器缓存和cookie，被清除项可从所有对象或给定域中选择。
－直接访问关联W3C规范参考、IE开发组blog或其他来源。
－显示设计时标尺，帮助对齐对象。
官方网站地址：
http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en