H5+CSS3.0常见bug及解决方案

来源：互联网发布：linux安装jdkrpm 编辑：程序博客网时间：2024/05/01 15:48

常见问题（bug）及解决方案

1.图片下方有空隙

           插入图片后默认会有一个空隙给父级元素加一个边框就能看到

           解决方案：
               img{vertical-align：middle/top/bottom;}
               img{display:block;}

2.插入多个img标签时，换行输入代码，图片左右之间有一个空隙

           解决方案：
               让代码在同一行显示
               或者img{float：left；}

3.img标签与文本之间或者与input标签上下不对齐

解决方案：
img{vertical-align：middle；}

4.img标签与其他之间有空隙时

           解决方案：
               img{float：left；}
                   其他标签{float：left；}
                   通过margin-top来控制上下之间的距离

5.img标签鼠标经过时边框显示一半的问题

       <a href="#"><img src=""></a>
           解决方案
               a{display:block;width:100px;height:200px}
               a:hover{border:1px solid red;}
           这是因为要考虑到IE6只能识别a:hover，为了兼容IE6浏览器
               或者img:hover{border:1px solid red;}

6.给图片添加超链接之后，图片会自带一个两像素的边框（IE）

解决方案：
img{border：none；}

二、间距带来的问题（margin和padding）

       1.浏览器当中所有的标签都会自带margin和padding，且每一个浏览器的margin值和padding值不一样
           解决方案：
               *{margin：0；padding：0；}
       2.块级元素的margin上下会取最大值，行内元素上下的margin不起作用，行内块元素的margin上下累加
       左右的margin都会累加
       3.给子元素添加上边距的时候，会作用在父元素身上
           解决方案：

               给父元素加padding值 padding：0.1px；
               父元素加边框不可选虽然能实现
               父元素加浮动不可选虽然能实现
       4.经典3像素bug（IE6）
           两个div 第一个div float：left 第二个没有浮动两个div之间会有3px的间距经典三像素
           解决方案：
               让两个元素都浮动就行
       5.双边距问题（IE6）
           IE6横向margin加倍
           解决方案
               给该元素添加_display：inline；       6.margin：0 auto；对于IE6不好使，在IE6中加text-align:center;使块级元素水平居中

三、行高及高度

   1、浮动引起的副作用（子元素浮动，父元素的高度塌陷）
       1.给父元素加高度
       2.给父元素overflow这个元素
       3.在最后一个子元素的后面添加一个空白div，给该div设置clear：both
       4.使用万能清除浮动的方法
           .clearfixed:after{
               content:"."
               clear:both;
               display:block;
               visibility:hidden;
               height:0;
               }
       5.高度自适应

SEO搜索引擎优化与伪代码

网络爬虫
<meta name="keywords" content="">
<meta name="description" content="vr|html5|h5|大数据|java">
line-height height
width text-align

一些注意事项

设了float属性的元素设了定位的一般都设置一下height和width
父元素设置宽和高和背景对子元素文字的大小、行间距
包含了h p 标签才用section
下拉菜单的时候li不要加高度（点击时的下拉菜单）
制作小三角的时候，使用border时可以用复合属性
border:10px solid transparent
border-bottom:10px solid red

0 0