您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5
布局中 各类常见的兼容性问题
胜于蓝2019-07-30【CSS3|Html5】人已围观
简介1.双倍浮动Bug 描述:块元素设置 float 后,又设置了横向的margin,在IE6下显示的margin值比设置的值要大; 解决方案:给设置 float 的元素添加 display: inline; 2.表单行高不
1.双倍浮动Bug
描述:块元素设置 float 后,又设置了横向的margin,在IE6下显示的margin值比设置的值要大;
解决方案:给设置 float 的元素添加 display: inline;
2.表单行高不一致
解决方案:
①:给表单元素添加 float 属性;
②:给表单元素添加 vertical-align: middle;
3.在IE6下不能识别较小高度的容器(一般小于10px)
解决方案:
①:给容器添加 overflow: hidden;
②:给容器添加 font-size: 0;
4.在a标签中嵌套img标签,在某些浏览器中图片会有边框
解决方案:给 img 标签添加 border: none; 或 border: 0;
5.最小高度 min-height 在IE6下不兼容
解决方案:
方案一:
min-height: 100px; _height: 100px;方案二:
min-height: 100px; height: auto !important; height: 100px;
6.图片默认有空隙
解决方案:
①:给图片添加 float 属性;
②:给图片添加 display: block;
7.百分比BUG
描述:两个宽度为 50% 的元素左浮动后,大于父元素的100%;
解决方案:给右边浮动的元素添加 clear: right;
8.鼠标指针BUG
描述:cursor: hand; 只有低版本的IE浏览器支持;
解决方案:cursor: pointer; 所有浏览器都支持;
注:cursor 用来设置鼠标指针的形状;
9.低版本IE浏览器不能识别opacity属性
解决方案:
opacity: 0.5; filter: alpha(opacity=50);
10.上下margin重叠问题
描述:给上边的元素设置margin-bottom,给下面的元素设置margin-top,浏览器只会识别其中较大的那个值;
解决方案:
①:margin-top 和 margin-bottom 只设置其中一个值;
②:给其中的一个元素在套一个容器,并设置overflow: hidden;
11.给子元素设置 margin-top 应用在了父元素上(假传圣旨)
解决方案:
①:把给子元素设置的 margin-top 改为给父元素设置 padding-top
②:给父元素设置 float
③:给父元素设置 overflow: hidden;
④:给父元素添加 1px 的透明边框 border-top: 1px solid transparent;
PS:设置透明边框
border: 1px solid transparent;
12.按钮默认大小不一
解决方案:
①:如果设计稿中按钮是一张图片,直接给按钮设置背景图即可;
②:用 a 标签模拟按钮;
Tags:
很赞哦! ()
相关文章
随机图文
-
div 标签的用法以及定义
div(无语义标签)作用:主要用于划分板块语法: <div class="名" style="样式"></div>定义和用法 <div> 可定义文档中的分区或节(division/section)。 <div> 标签可 -
表格高级(表格相关css属性)(表格重要html属性)、样式重置
表格相关css属性1.合并相邻单元格边框(给table加) 语法: border-collapse: collapse(合并相邻单元格边框) | separate(相邻单元格边框分开);2.设置表格标题的位置(给tab -
布局中 各类常见的兼容性问题
1.双倍浮动Bug 描述:块元素设置 float 后,又设置了横向的margin,在IE6下显示的margin值比设置的值要大; 解决方案:给设置 float 的元素添加 display: inline; 2.表单行高不 -
HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。颜色值HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十