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

发布于:2014-08-08 18:30:08 - 查看:1709次

<- -转自 豆瓣 *^_^**^_^的日记- ->

在博看文思学习前端开发已经有两个月了,开始进入实战练习的阶段。从对前端开发一无所知到一步步在实践中做出自己理想中的效果来。老师说学习的精髓在于不断总结、思考,可是一直忙于做练习从没有系统的总结。这里将练习中遇到的一些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标签。