HTML/CSS中常遇到的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;}。
0000000000000000000000000000000000000000000000000000000000000000000000000000000000
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标签。
HTML/CSS中常遇到的bug 一些注意事项总结的更多相关文章
- CSS 中,用 float 和 position 的区别是什么?
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
- CSS中一些常见的兼容性问题
CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...
- css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
- CSS中"!important"的使用
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS中!important的优先级
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
随机推荐
- WCF之契约
消息交换的双方,为了进行消息交换,而定义的一些数据交换规则,称之为契约. 契约只约束规则,不管实现. 契约对客户端和服务器的要求. 服务器:定义和实现契约.构建ServiceHost实例,然后暴露En ...
- 《锋利的jQuery》心得笔记--Four Sections
第八章 1. 当父元素设置position:relative的时候,子元素设置position:absolute.这个子元素设置在父元素的任何位置. 第九章 1. 对可视区进行纠正,通知浏 ...
- 单元测试+修改BUG
程序源代码: #include<iostream> using namespace std; int Largest(int list[], int length) { int i, ma ...
- Codevs 2611 观光旅游
时间限制: 1 s 空间限制: 128000 KB 题目等级:钻石 题目描述 Description 某旅游区里面有N个景点.两个景点之间可能直接有道路相连,用a[i][j]表示它的长度,否则它 ...
- Linux下OpenCV的环境搭建
OpenCV is the most popular and advanced code library for Computer Vision related applications today, ...
- UIView背景渐变三种方法
//此作品非原创 #import "ACViewController.h" @interface ACViewController () @end @implementation ...
- VHDL基本常识
std_logic_vector和integer需要通过signed或unsigned进行间接转换(强制转换) a_std <= std_logic_vector(to_unsigned(a_i ...
- vs2008团队资源管理器安装步骤
1.先装 VS2008TeamExplorer { NOTE: 要区分中英文版本Microsoft Visual Studio 2008 Service Pack 1 (iso) VS2008SP1C ...
- webpack使用webpack-dev-middleware进行热重载
新手,刚开始学习webpack,想使用webdevserver,但定制性太差,于是研究了一下使用webpack-dev-middleware进行指定. 根据文档https://www.npmjs.co ...
- opencv学习笔记(04)——ROI
ROI的用法:1.直接相加:2.掩码法 #include <opencv2\highgui\highgui.hpp> #include <opencv2\imgproc\imgpro ...