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

“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验证工具，可分别在<a href="http://validator.w3.org/" target="_blank">http://validator.w3.org</a>和<a href="http://jigsaw.w3.org/css-validator" target="_blank">http://jigsaw.w3.org/css-validator</a>访问。 需要注意的是，由于不恰当的嵌套等原因，文档中较早出现的错误可能会导致随后更多的难失败，而这些难失败之处却并不一定是真正的错误。我们建议首先修复一些明显的错误，然后重新验证：这时错误总数可能会直线下降。 创建并测试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浏览器对盒模型的理解是错误的，因此当为元素指定了高度或宽度时，其结果往往不能如我们所愿。虽然对于这个问题已经有了一些权宜之计（请参考<a href="http://tantek.com/CSS/Examples/boxmodelhack.html" target="_blank">http://tantek.com/CSS/Examples/boxmodelhack.html</a>）但最好还是从源头上避免。例如：若某元素需要固定的宽度/高度，那么既可以用其子元素的外边距值来撑大，也可以用其父元素的内边距值来约束。 避免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之类的高级浏览器都允许用户调整字体大小。肯定会有一些用户所使用字体大小与我们的不同，所以在声明字体大小时，我们就应该尽量考虑到这些可能出现的变化。 在HTML和CSS中统一大小写 在大多数浏览器中，CSS都是大小写敏感的。若是CSS和HTML中都使用了同样的homePage做为某Class的名称，则自然良好工作。但若在CSS中将该规则改为“homepage”，那么在一些严格遵守CSS规范的用户代理（例如Mozilla浏览器）中就会问题。 测试时使用嵌入样式，发布时再改为外输入 若在测试时将样式表嵌入到HTML源代码中的 <style type="text/css">标签中，即可避免许多因浏览器缓存导致的不正确现象。对于某些较老的浏览器来讲，这一点至关重要。但在发布前，记住一定要将这些样式移至外部文件，然后用@import 或 <link>引入，否则将无法得到外部CSS带来的好处。 用明显的边框辅助调试布局 * {border: solid 1px #f00;}之类的全局规则可以帮助检查出很多细微的布局差错。为某个特定的元素加上边框也便于找到一些难以发觉的元素重叠或多余空白问题。 指定图片路径时不要使用单引号 设置背景图片时的引号并不是必须的。不但如此，若用单引呈给出图片路径，那么苹果机上的IE将无法正确加载图像。因此要么使用双引号，要么根本不用任何引号。 若使用了锚点（anchor），那么在为超链接应用样式时要格外小心 如果代码中使用了传统的锚点（例如<a data-cke-saved-name="anchor" name="anchor">），将发现:hover 和 :active伪类的样式也会应用于其上。我们可以使用独一无二的id（例如<div id="anchor">），或昌一种鲜为人知的奇怪语法:link:hover 和 :link:active来避免这种情况。请参考www.dbaron.org/css/1999/09/links. 不要未雨绸缪地链接至作为“占位符”的空样式表（例如手持设备或打印用样式表） 苹果机的IE5对空的样式表比较敏感，页面的加载时间将因此变长。因此，我们建议样式表中至少应该有一条规则（哪怕注释也好），或都干脆就不要链接。 理解问题 理解问题才是修复问题的关键，这或许是我们能够提供的最有用的一个建议。想要了解CSS而已中的常见问题别无它法，唯有时间为代价换来经验。 假设在Windows平台上的IE中发现某个浮动元素旁多出了3个像素的水平间距，且只有在该浏览器中才出现。如果并不知道这是IE在处理浮动元素时的一个缺陷，则可能会尝试使用负外边距值、相对定位或者为其他环绕元素应用一些CSS hack，以期弥合这个令人费解的间距。 但如果事先了解了Windows平台上的IE的这个独特的缺陷，即自动为某些浮动元素添加了3个像素的额外外边距，那么就不概要猜测并逐一尝试上述方法了。 尝试修复这类难以理解的缺陷所带来的别一个问题就是，之类缺陷是可以叠加的。如果已经在页面中添加了很多这样令人费解的补丁，那么整个页面结构将充满显示问题，再也无法稳定下来。若是早先的问题都没有妥善解决的话，那么开发中随后的高工过程将变得更加举步维艰。 但如是提清楚了导致所遇到的某个缺陷的真实原因，那么除错的过程将会变得相当简单直观。“CSS Crib Sheet”只是一个开始，很多其他网站也都详细讨论了特定浏览器在呈现过程中的问题。这是一个开始，很多其它网站也都详细讨论了特定浏览器在呈现过程中的问题。这里我们强烈推荐从Position Is Everything (www.positioniseverything.net)网站开始接下来的学习。 </style>