html显示错误出在哪,CSS如何排查错误?从哪入手

本文介绍了在编写CSS样式时遇到错误的排查方法。首先,检查HTML标签是否闭合,单词拼写是否正确;其次,使用样式排除法定位问题CSS文件和样式定义;再者,确保使用了正确的DOCTYPE以影响浏览器解析;还要考虑浏览器对CSS属性的支持情况;最后,通过隔离问题定位边距重叠、特殊性或浮动元素等问题,并调整可能触发IE Bug的属性。
摘要由CSDN通过智能技术生成

CSS如何排查错误?从哪入手

发布时间:2014-05-05 16:16:43   作者:佚名   text-message.png 我要评论

在写css样式的时候难免会遇到调试后没有效果的情况,原因是你的演示书写有问题,或者是其他的一些因素,由于很多,于是本文整理了一些常见的错误排查方法,希望对大家有所帮助

一、检查代码单词有没有错误?html标签是否闭合?

我们在进行网页设计的时候,html语言规范是首尾要闭合,如果仅仅写一个头< head >,那么末尾就应该有< /head >这样代码来完成整改网页头部的设计!可是很多设计师因为粗心大意,往往只写了一个头部,却忽略了闭合,导致CSS BUG的出现!当然这是在记事本下编写网页会出现的,现在只要使用一些专业的网页设计软件,比如frontpage,dreamweaver等等,代码的部分会通过颜色的提醒,不过对于某些设计师来说,第一次容易粗心大意,经过二次检查往往会能够避免,当然,更多的网页设计师在设计网页的时候,将css代码的单词少写了一个字母!所以这往往是导致出现CSS BUG问题的重要原因!

二、样式排除法

有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。

对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。

三、检查是否有合适的DTD

不同的DOCTYPE直接影响浏览器对于(X)HTML和CSS的解释。

四、检查CSS属性浏览器是否支持

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

五、 隔离问题

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

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

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

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

Tag:排查错误

相关文章

2cd0a0958d4d8fb63b72f92cd69ada59.png

这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-13

e4b76401dff19ab4596956a4061ae4aa.png

这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-10-12

1d11de5f0c551f376ce810aeed4f2587.png

这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12

这篇文章主要介绍了CSS两种常用的封装示例,帮助大家更好的利用CSS制作网页,感兴趣的朋友可以了解下2020-10-12

e233f0dc167e354cb738ecc544a8cb7e.png

这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12

e7869b713a606c284e74a1219a3e6d57.png

这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09

4218292b7e4d3a48e9bb3bdc337e5dbb.png

这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09

这篇文章给大家介绍了CSS中width和height的默认值auto与%案例,本文通过实例案例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-09-30

a5183467a68d4ccd2166633d4208bbba.png

这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28

56accc07564f6a9aa887be55dc5f13df.png

这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28

最新评论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值