CSS效验的常见错误

创建时间：十二月 28th, 2007 Traffic(387)

CSS效验的目的同XHTML效验一样，都是为了让我们养成良好的书写习惯，使网页兼容各种浏览器。

关于遵循W3C标准设计的好处就不多说了，下面重点介绍一下在效验过程中的几种常见错误。

请先看这样一段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS效验的常见错误</title> <style type="text/css"> div, span { color:#000; border:1px #000 solid; display:block; margin-top:10px; padding:10px; } div span { color:#F00; } #abc { width:100px; height:14px; background-color:#EEE; /* 将abc对象的背景色设置为灰色 */ line-height:14px; /* 行间距 */ overflow:hidden; /* 隐藏超出范围的内容 */ word-break:keep-all; /* 是文字保持在一行上 */ text-overflow:ellipsis; /* 对超出范围的内容加省略标记 */ padding:0 10px; } </style> </head> <body> <div> <span>这个span属于div</span> </div> <span>这个span不属于div</span> <div> 这里的长度是50像素，多的文字将被隐藏掉，并且用省略号替代。 <span id="abc">多的文字将被隐藏并且用省略号替代。</span> </div> </body> </html>

这个文件中的CSS代码在效验时还是有些问题的，下面就出现的问题做详细的介绍。

一、属性不存在错误

虽然上面提示了属性不存在，但在IE下还是生效了的，这就是因为它们是IE专有的属性，W3C认为不能被所有浏览器支持，所以，这两个属性没有被W3C采纳。但要说这个是错误也有些牵强，毕竟在IE下还是起作用的，只是在其他浏览器中（如Firefox）没有此效果罢了。下面是在Firefox中的效果：

由图可以看出，在Firefox下没有后面的省略号。

如果要让Firefox同IE显示的一样，使文字超出范围后显示省略号，建议使用JavaScript编程实现。或干脆去掉省略号。

下面的代码是去掉两个未知属性后的代码及效验：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS效验的常见错误</title> <style type="text/css"> div, span { color:#000; border:1px #000 solid; display:block; margin-top:10px; padding:10px; } div span { color:#F00; } #abc { width:100px; height:14px; background-color:#EEE; line-height:14px; overflow:hidden; padding:0 10px; } </style> </head> <body> <div> <span>这个span属于div</span> </div> <span>这个span不属于div</span> <div> 这里的长度是50像素，多的文字将被隐藏掉，并且用省略号替代。 <span id="abc">多的文字将被隐藏并且用省略号替代。</span> </div> </body> </html>

二、CSS警告信息

就在写CSS基础一篇文章时还有，而现在取消了对“没有为前景色设置背景色”的警告。

以前如这样的代码：div span {color:#F00;}，因为只设置了文字颜色，而没有设置背景颜色将会被警告，反过来也是如此。我想当初警告的初衷是提醒开发者区分文字和背景的颜色（即避免有意或无意的隐藏文字），增强用户的浏览体验而设置的。既然现在取消了也就不再多说了，不过还是要提醒大家，尽量大的反差设置文字与背景颜色，这样会使用户在浏览的时候不会太累。

其实，像这样的例子还有很多，比如：div {border:1px #000 solid;border-right:none}，这段代码的意思是除了右边以外的其它三边都用1像素的黑色线条围起来，但这在以前是不被允许的，认为重复定义了属性。必须要分别定义，如{border-top:1px #000 solie;border-bottom:1px #000 solie;border-left:1px #000 solie;border-right:none;}。可以看出这样写是非常烦琐的，而上一个就比较方便，并且也可以被各浏览器支持，所以这个错误提示自然也就取消了。

可以看出，随着各浏览器版本的提升，会有更多的属性被支持，W3C在为使开发者不必在为浏览器的兼容问题而编写不同的代码不断努力着。到那时也许这两个属性也不再提示错误了。

本站也会继续观察，并随时将最新的信息在第一时间传达给大家。

Posted by: 近水社区

相关文章：

CSS基础（Traffic：494 | Posted By：近水社区）
XHTML效验的常见错误（Traffic：459 | Posted By：近水社区）

相关模板：

暂无相关模板

上一篇：XHTML效验的常见错误下一篇：认识DIV及基本布局的简单应用

Comments(0)

暂无留言。

CSS效验的常见错误

Comments(0)

话题搜索

文章推荐

留言修改：