如何调试CSS的跨浏览器样式bug
作者:网络转载 发布时间:[ 2014/9/16 13:40:30 ] 推荐标签:软件测试管理 缺陷管理
首先要做的是挑选一个好的浏览器。我的选择是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组合了。总之,有两件事情需要注意:
对于我选择的display和position方式,其他的属性(比如margin,line-height)是不是适合?
兄弟节点的position方式是不是契合?
比如,float,table-cell和行内元素组合在一起是否合适?浏览器将如何解释渲染?在W3C标准里有没有定义?如果没有,那么可能有出现跨浏览器bug的风险。当然,这样的组合并不是不可以,但你要想清楚为什么要这样做,以及做好足够的跨浏览器测试。
Internet Explorer
当你解决了在“好的”浏览器上出现的问题后,现在应开始着手IE平台。我的建议是从你希望支持的老版本的IE开始,因为很多老版本IE上的问题在新版本中延续出现。
算对于IE,你也应该尝试找出问题而不是依赖于使用hack方法。盲目使用*和_的hack方法像在一个返回错误值的函数中加入修正量(如下),而不是找出其中的算法性错误。
return result + 4;
当然,有时候在IE6和IE7里面使用hack是必要的。对于IE8,通常只在需要兼容CSS3的地方使用hack。通常情况下,在IE6/7里需要使用hack的地方有:
hasLayout问题,使用zoom:1
相对定位导致元素消失
3px浮动BUG
被撑大的容器的浮动错误,可是经常被overflow:hidden碰巧的掩饰了。
还有一些不太常见的需要使用hack的情况,比如当两个浮动元素中间有comment代码时将会触发重复内容bug。对于只在IE中出现的css问题,我的建议是仔细描述你所看见的,并在google中搜索相应的解决方法。在你找到bug原因前,不要盲目使用hack掩饰它。IE自带的调试工具很糟糕,所以可能你需要给元素增加背景色来方便你查看页面上真实的排版。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11