关于调试CSS跨浏览器样式bug的问题

2024-08-30 08:35:12

字体：大中小

来源：转载

供稿：网友

首先要做的是挑选一个好的浏览器。我的选择是Chrome，因为它拥有强大的调试工具。当我在Chrome上完成调试后，我会接着在Safari或者Firefox上调试。

如果在这些“好的”浏览器上没有达到期望的效果，很有可能是代码本身违背了CSS规则。不要试图使用hack方法来解决在这些“好的”浏览器上出现的问题，而是应该找出问题的原因。通常我会检查以下可能的BUG出处：

HTML代码解释 – 你是否忘记闭合一个标签？你是否用一个inline元素包住一个block元素？违背标准的代码可能在不同的浏览器上被解释呈现成不同的效果。
使用CSS lint工具检查CSS代码。留意那些检查出来的Errors。多数情况下，Errors比Warnings更容易引发跨浏览器差异。
忘记使用reset样式表，而是依靠于（不同的）浏览器默认的CSS样式。
浏览器支持性的差异。你是否使用了高级CSS3属性或者HTML5元素？查看浏览器支持性文档从而确保所有你的受众的浏览器都被涵盖。你需要设计“功能降级”来支持老式的浏览器。比如，把阴影边框降级成边框，或者把圆角降级成方块。
在不该有空格的地方加上了空格，margin可能因此呈现得诡异。
使用了绝对定位，可是没有设置垂直和水平偏移。这种情况下，绝对定位的元素将被呈现在跟position:static一样的位置上。但是，如果你尝试更改它的top，right，bottom或者left值，这个元素将马上“跳”到参照于它最近的相对定位的父元素的位置。
按照“不寻常”的方式组合了不同display方式的元素。比如，W3C标准并没有说当一个table-cell紧邻一个浮动元素时应该是怎样的layout。因此，这样写的代码并不是错误的，但可能会导致跨浏览器呈现不同效果的BUG。
空格是否影响了layout。你应该不想让排版样式依赖于空格。
小数点像素值会导致跨浏览器的不同效果。

接下来正文来了

最重要的需要记住的就是，W3C标准并没有定义错误的行为。因此，如果你没有按照规范写，那么可能会导致跨浏览器不同效果；如果你组合“奇怪的”属性（例如margin和inline element），那么也可能会导致跨浏览器不同效果bug。

Display

我认为书写CSS就像在选择一段旅程。你需要作出一些决定.比如你要首先选择使用不同display方式的元素：block，inline，inline-block和table。当你选择好以后，你可以使用一些具体的方法来改变其实际的显示。

块元素应该使用margin，padding，height和width。然而line-height不适用。

行内元素应该使用line-height，vertical align和空格符。然而margin，padding，height和width不适用。

首先，表格有垂直和水平排列方式。其次，如果你遗漏了表格中的某元素，整个表格可能会有诡异的显示。最后，margin不适用与表格的行和列，padding不适用与表格和表格的行。

Positioning

如果你选择使用块级元素，接下来你需要选择position方式：

Float – 如果你使用了float，那么这个元素就变成了块级元素，而之前作用于该元素的vertical-align和line-height属性都将失效。
Absolute – 相对于最近的相对定位的父节点来计算偏移量。当父节点和兄弟节点改变时，绝对定位的元素并不会导致reflow。这个特性有利于制作动画效果。但是，如果使用了绝对定位和动态更改内容将可能会导致显示问题，一个典型的例子是绝对定位的圆角框。
Static – 默认的position方式。
Fixed – 元素位置相对于浏览器窗口。不常使用的方式。
Relative – 通常对于该元素样式不影响。只是其下属的绝对定位的子节点将相对于该节点计算偏移。

在这里我就不列举所有的display和position组合了。总之，有两件事情需要注意：