HTML/CSS中常遇到的bug 一些注意事项总结

原创 2018年04月16日 20:52:31

 HTML/CSS中常遇到的bug 一些注意事项总结

在潭州学习开发已经一个多月了,开始进入实战练习的阶段。从对前端开发一无所知到一步步在实践中做出自己理想中的效果来。老师说学习的精髓在于不断总结、思考,可是一直忙于做练习从没有系统的总结。这里将练习中遇到的一些bug和做网页时需要注意的一些问题做一个总结。

注意事项:

1、IE6下横向双倍margin bug (触发条件:块属性标签;float;横向margin设置;IE6下。解决办法:css中加入display:inline。)

2、css中公用属性首先声明;如对浏览器对某些标签有默认的margin 和padding 值首先声明默认值为0。

3、css中class类名必须有实际的意义,必须与内容相关;不得用纯数字用于class类名。

4、IE6下标签嵌套时,如果内层标签float,只有清除内层标签的浮动后外层标签才能被撑开。

5、清除浮动时用div而不用其它标签清除浮动;


 .clear {height:0;clear:both;overflow:hidden;}



6、IE6下定义1px的高度或定义小于等于10px的高度;IE6下默认行高是10px,解决办法是:overflow:hidden / zoom:0.08 / line-height:1px。

7、超链接点击过后就不在出现hover样式?解决方法是:改变css属性的排列顺序L--V--H--A。

8、使用群组选择器时,class名之间必须用空格隔开,否则firefox将不会读取CSS命令。

9、a标签中嵌套img时,必须有a{dispaly:block;}否则在IE6下将影响布局(即在图片下方多出一部分空白)。

10、a标签中嵌套img时,img默认会有1px的border,需要在CSS中加入a img {border:none;}。

11、a标签中嵌套img时,a标签必须为块属性(即display:block;)否则在IE6下图片下方会多出一部分,影响布局。

12、在进行position定位时如果是标签嵌套时定位必须将父标签里的浮动全部清除,子标签的浮动后的CSS样式才能在IE6下被读出。

13、通过改变后缀名改变图片格式的图片在IE6下读不出,在其他浏览器下将以原来的格式解析图片。

14、li 中嵌套img  img需要float否则在IE6下  img下方会多出一部分  有空隙。

15、在IE6下使用position定位,内标签必须清除浮动,否则定位的标签将无法显示。

16、未使用float浮动时,内层标签的margin值撑不开外层标签,而内层标签的padding值则可以撑开。

17、标签嵌套时,如果父子标签均浮动,子标签就不用清除浮动。

18、logo外层需要用H1标签嵌套。

19、在后台无法改动css,改动css需要改代码,所以需要更换的图片使用img标签。

前端开发从0到就业之HTML

本课程为前端开发从0基础到高级再到实战开发的系列课程,适合没有0基础小白、初级基础的学员,课程内容涵盖前端行业前景、浏览器介绍、HTML发展史、HTML标签的详解介绍以及HTML5。新手学习前端之首选!
  • 2017年11月14日 23:02

前端开发中的兼容性问题-CSS篇

浏览器兼容性问题一直都让我很头疼,网上大神们给出的解决方法也是五花八门,向后或向前兼容的说法都有,所以自己整理一下,如果有不恰当的欢迎指正!...
  • Mankii
  • Mankii
  • 2017-11-06 16:08:11
  • 175

html&css 新手入门常遇到的bug总结

本人也是web前端新手一枚,之前有过java和C#的相关工作经验,因为兴趣问题将技术学习方向转移到前端开发方向上来,目前正在学习基础中。 由于html和css都是属于静态代码,无法进行动态调试,这就让...
  • carriehaohao
  • carriehaohao
  • 2016-10-23 21:35:40
  • 716

前端面试题答案的解答:html+css部分

知乎上一个前端面试题答案的解答: https://www.zhihu.com/question/19568008HTML+CSS
  • u013194113
  • u013194113
  • 2016-07-25 16:47:59
  • 1988

前端常见BUG--css篇,及处理方法(持续更新)

前端常见样式bug,及处理方法:【2015-09-10】a,input,textarea,img标签点击后出现虚框,黄框等;a{outline:none;}去苹果浏览器默认样式input,textar...
  • haozq2012
  • haozq2012
  • 2015-09-10 17:57:39
  • 1234

web前端开发技巧(HTML+CSS+Jquery)

1.css选择器 1)伪元素:之前刚接触css的时候,傻傻的只知道用class和id的修改样式,最近才发现:after和:before同样好用。我么可以在:after这些为元素中添加内容,比如:a:a...
  • jinxi1112
  • jinxi1112
  • 2016-09-13 16:54:40
  • 356

前端开发面试总结HTML、CSS部分

要点:对Web标准的理解、浏览器差异、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式...
  • Jane617_min
  • Jane617_min
  • 2015-12-12 10:42:15
  • 1524

常见前端面试题之HTML/CSS部分

前端页面有哪三层构成,分别是什么?作用是什么?   1、结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。   2、表示层:由CSS负...
  • daditao
  • daditao
  • 2014-02-13 10:43:33
  • 1472

移动端前端笔记 — 常见JS与CSS问题及解决方法

一. css部分 body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidd...
  • quhongqiang
  • quhongqiang
  • 2018-01-15 17:17:26
  • 90

web开发常见问题集锦

1.JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 ...
  • q121516340
  • q121516340
  • 2016-05-17 15:06:22
  • 1568
收藏助手
不良信息举报
您举报文章:HTML/CSS中常遇到的bug 一些注意事项总结
举报原因:
原因补充:

(最多只允许输入30个字)