学习CSS网页布局时排查错误的方法

李爷345

李爷345

2016-02-19 18:53

下面是个超简单的学习CSS网页布局时排查错误的方法教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

  虽然浏览器可能存在着很多Bug,但是并不是与自己感觉不一样的时候就是出现了Bug。产生问题的原因可能有很多种,因此制作者需要一定的方法来排查问题。

  选择一个先进的浏览器进行测试是明智的做法,例如对CSS 2.1支持比较好的Opera 9.2、Firefox 2.0或者Safari 3.0,而不要使用IE 6作为唯一的测试浏览器,因为IE 6的问题是最多的,这非常不利于制作者(特别是初学者)理解CSS 2.1的规范与判断浏览器的表现是否正确。

  如果在先进的浏览器内测试是正确的,而在IE内有问题,那基本上可以判定是IE的问题。

  如果在先进的浏览器内的显示不正确,那么可以先进行如下初步判断:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  1. 拼写是否正确

  可以使用W3C的校验,或者网页编辑软件的校验功能,来检查(X)HTML文档内的标签是否配套、嵌套顺序是否正确、空标签是否闭合,CSS拼写是否正确。不正确的嵌套、错误的拼写是非常常见的错误。

  提示:现在有很多编辑软件都可以提供(X)HTML和CSS的校验功能,包括浏览器对CSS属性是否支持等。例如:Dreamweaver 8以上版本,TopStyle等软件。

  提示:Firefox中的附加软件“Firebug”是一个非常好用的工具,它不仅可以检查(X)HTML、CSS和JavaScript是否正确,还可以动态显示页面内元素的框和位置,是调试网页很好的辅助插件。

  2. 是否有合适的DTD

  在本书的其他章节里,曾经不止一次地强调过DOCTYPE的重要性,不同的DOCTYPE直接影响浏览器对于(X)HTML和CSS的解释。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)


  3. CSS属性浏览器是否支持

  虽然现代浏览器支持绝大部分的CSS 2.1规范和部分的CSS 3规范,但是在前面的章节也介绍过,有一些CSS属性还没有被浏览器广泛支持,因此在某个属性没有生效的时候,请确定浏览器是否支持。

  4. 隔离问题

  将有问题的地方突出出来,例如给元素加一个醒目的边框或者背景颜色。

  如果增加了边框就可以解决问题,那么就是边距重叠的问题。

  如果增加了背景,但是背景不显示,那么有可能是特殊性或者浮动元素没有闭合。

  尝试修改一些属性,特别是会触发IE的hasLayout的属性,判断是否是IE常见的Bug。

  5. 建立基本测试

  如果还不能解决问题,则可以复制问题文件,然后删除多余的(X)HTML,只留下有问题的部分。

  删除(X)HTML内的注释问题,看问题是否会消失。

  删除元素间的空格,看问题是否会消失。

  然后分块注释掉样式表,直到问题消失,则刚注释掉的样式即为问题所在。

  6. 解决问题而不是解决现象

  找到问题根源的所在并解决它是最终目,而不是为了迁就表现而使用复杂的Hack来让网页“看上去很美”。不从根源上解决问题,当浏览器升级以后,可能会遇到更多的问题。同时,Hack的时候可能会造成新的问题的出现,特别是触发或者避免触发IE的hasLayout属性。

  换一种思路也许也可以避免问题的出现,例如将元素的margin属性取消,改为设置其父元素的padding属性。

  只有实在无法解决的时候,再使用Hack。

展开更多 50%)
分享

猜你喜欢

学习CSS网页布局时排查错误的方法

Web开发
学习CSS网页布局时排查错误的方法

CSS网页布局排查错误的方法

Web开发
CSS网页布局排查错误的方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

学CSS网页布局排查错误的方法

Web开发
学CSS网页布局排查错误的方法

如何排查CSS网页布局时书写错误

Web开发
如何排查CSS网页布局时书写错误

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

学习css网页布局口诀

Web开发
学习css网页布局口诀

制作网页使用的CSS样式表错误排查方法

Web开发
制作网页使用的CSS样式表错误排查方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PHP实现定时生成HTML网站首页

PHP实现定时生成HTML网站首页

上辈子肯定无家可归 这辈子才宅成这样

上辈子肯定无家可归 这辈子才宅成这样
下拉加载更多内容 ↓