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标签