常见的CSS问题给出“一站式”的解决方案

2008-02-23 08:44:38来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

“CSS Crib Sheet”旨在为很多常见的CSS问题给出“一站式”的解决方案

如果曾用CSS创建过一两个网站的话,那么很容易发现浏览器对CSS的支持仍远远称不上完美。取决于作品的复杂程度,最终很有可能导致这样的结局:沉陷于CSS的泥沼中, 气愤得只想撞墙,并发发誓今后再也不会去做Web设计,甚至会觉得哪怕是城市规划或都核物理,都要比CSS简单、友好得多。

若处于这样的情绪中,那么请相信自己并不孤单。在我们背后,整个社区都在一刻不停地与基于标准设计中遇到的各种一倡百和 着斗争,并分享着他们的成功经验。基于很多的现有资源,本书的合著者之一Dave Shea也整理出了一份资料,叫做“CSS Crib Sheet”。“CSS Crib Sheet”旨在为很多常见的CSS问题给出“一站式”的解决方案,下面我们应将其完整列出。“CSS Crib Sheet”的最新版本可以到www.mezzoblue.com/css/cribsheet访问。

若是不确信的,那么就去验证

在调试之前若能简单地难一下代码,将为我们减少很多头痛的经历,节省很多时间。格式不正确的XHTML或CSS将导致很多布局问题。这时,使用验证工具可以很愉找到并纠正这些错误。W3C提供了XHTML和CSS验证工具,可分别在http://validator.w3.orghttp://jigsaw.w3.org/css-validator访问。

需要注意的是,由于不恰当的嵌套等原因,文档中较早出现的错误可能会导致随后更多的难失败,而这些难失败之处却并不一定是真正的错误。我们建议首先修复一些明显的错误,然后重新验证:这时错误总数可能会直线下降。

创建并测试CSS时,首先在最高级、最先进的浏览器中进行,然后再考虑其他浏览器

如果首先基于那些较为古老的浏览器创建并测试CSS的话,那么代码将无法避免地依赖于这些浏览器中落后、错误的呈现规则。这样随后在那些更先进、更遵守标准的浏览器中调整时,将变得举步维艰--这无疑是一种倒退行为。

因此,若是首先基于先进浏览器编写,然后再为那些非标准浏览器调整的话,代码将从一开始就非常标准,调整的过程也会非常容易。就目前的实际情况看来,应该首先在Mozilla (Firefox), Safari或者Opera中测试,然后再在IE中调整。

若用浮动实现布局,请确保正确地清除了浮动

浮动的使用非常富有技巧性,而且它也并不总是那么“听话”。若某个浮动元素超过了预期的边界,或者不管由于什么别的原因与预期的表现行为不同的话,那么首先应该确认的就是预期目标的合理性与正确性。关于这个问题,请查看Eric Meyer在他的网站Complex Spiral Consulting 上的教程 (www.complexspiral.com/publications/containing-floats)。

为元素应用内边距或边框来避免外边距重叠

有时候元素之间留出了一条并不希望看到的缝隙,而别一些时候却无法让元素之间保持一段距离。若效果是由外边距实现的话,那么罪魁祸首十有八九就是外边距重叠现象。Andy Budd 在他的网站中详细解释了这一现象(www.andybudd.com/archives/2003/11/no_margin_for_error).

避免同时为元素指定明确的内边距/边框值与宽度/高度值

Windows平台上的IE5.0和IE5.5浏览器对盒模型的理解是错误的,因此当为元素指定了高度或宽度时,其结果往往不能如我们所愿。虽然对于这个问题已经有了一些权宜之计(请参考http://tantek.com/CSS/Examples/boxmodelhack.html)但最好还是从源头上避免。例如:若某元素需要固定的宽度/高度,那么既可以用其子元素的外边距值来撑大,也可以用其父元素的内边距值来约束。

避免IE6的“无样式内容瞬间”现象

若用@import语句引入外部样式表,那么迟早会发现IE6的“闪烁”问题,即未经CSS格式化的HTML代码短暂地了现在浏览器中。我们可以通过使用link元素,或在页面中添加script元素来避免这个问题。详情请参考BlueRobot.com网站上的这篇文章:“Flash of Unstyled Content" (www.bluerobot.com/web/css/fouc.asp)

不要依靠min-width/min-height属性

IE/Win平台上的IE并不支持这两个属性,但它在某些情况下却把width和height属性认为是min-width或min-height属性。因此,借助于一些只为Windows平台上的IE设计的过滤规则,我们用width和height属性也可以实现min-width或min-height的效果。mezzoblue.com上的文章“”min-height: fixed(mezzoblue.com/archives/2004/09/16/minheight_fi).

尝试减少百分比值

浏览器计算中的舍入误差有时会让50%+50%等于100.1,导致布局被破坏。这时请尝试略为减少百分比的值,例如将50%改为49%或者49.9%。

IE中设有完整显示出内容?

若页面中的内容没有显示完全,但在鼠标悬停在某链接上时却能正常显示的话,那么十有八九是遇上了IE的“Peekaboo bug”.解决的方案请参考Position Is Everything网站上的文章:(www.positioniseverything.net/explorer/peekaboo.html)

确保要实现的效果确实存在

有些浏览器对CSS进行了一些并不在官方规范中的扩展,例如IE中的滤镜和滚动条样式等,这些属性不能应用在其它浏览器中。若验证工具显示某些代码没有定义的话,那么这些效果将很有可能不会在各个浏览器中表现出一致的行为。

牢记“LoVe/HAte(爱/恨)”链接规则

在为链接元素指定伪类时,牢记以下的顺序:link,visited,hover和active。任何其他的声明顺序都可能会导致问题。若是还要考虑:focus伪类,那么可将规则修改为LVHFA(可以用Matt Haughey给的记忆法"Lord Vader's Handle Formerly Anakin"记住这个顺序).

为非零值标明单位

在用CSS指定字体、边距或元素尺寸的值时,必须标明所用的单位(唯一的例外是line-height属性,虽然我们也可以为其指定单位,但这并不是必须的)。某些浏览器对未标明单位值的处理方法不足为凭,我们不能认为其他浏览器也会这样做。零就是零,没有必要分辨是px还是em。但非零值却一定要标明计量单位。例如:paddin:0 2px 0 1em;

测试不同的字体大小

无论在指定字体原始大小时使用了什么单位,Mozilla 和Opera之类的高级浏览器都允许用户调整字体大小。肯定会有一些用户所使用字体大小与我们的不同,所以在声明字体大小时,我们就应该尽量考虑到这些可能出现的变化。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:为便于简化和维护CSS,该如何组织CSS?

下一篇:初学:什么是DIV CSS?有什么优势?