1.图片下方有空隙 插入图片后默认会有一个空隙
给父级元素加一个边框就能看到 :
解决方案: img{vertical-align:middle/top/bottom;}
img{display:block;}
2.插入多个img标签时,换行输入代码,图片左右间有间隙:
解决方案:让代码在同一行显示 或者 img{float:left;}
3.img标签与文本之间或者与input标签上下不对齐:
解决方案:img{vertical-align:middle;}
4.浏览器当中所有的标签都会自带margin和padding,
且每一个浏览器的margin值和padding值不一样:
解决方案:*{margin:0;padding:0;}
5.行高及高度
1、浮动引起的副作用(子元素浮动,父元素的高度塌陷)
1.给父元素加高度
2.给父元素overflow这个元素
3.在最后一个子元素的后面添加一个空白div,给该div设置clear:both
4.使用万能清除浮动的方法
.clearfixed:after{
content:"."
clear:both;
display:block;
visibility:hidden;
height:0;
}
5.高度自适应
6.默认解析的最小高度是16px:
解决方法:给元素添加font-size:0;或者给元素添加over-flow:hidden;
7.表单控件(多个)不一致,单type类型设置为button的时候,高度和其他文本高度不一致:
解决方法:1.审查元素,直接对有问题的表单修改。
2.给有问题的表单控件添加盒子,给这个盒子设置样式。
8.百分比问题:在低版本浏览器中(50%+50%>100%):
解决方法:清楚浮动元素的空间(clean:both)/(clean:right).
9.网页中按钮元素大小不一致;
解决方法 :1.如果按钮不在表单里面,都是用a模拟;
2.如果按钮是一张图片,直接切图做背景即可;
3.input按钮边框显示问题,在input按钮的外围嵌套一个父元素,
边框加在父元素上面即可;
10.透明opacity在低版本浏览器中不解析:
解决方法:1.opacity:1;
2.filter:alpha(opacity=100);