发表于： 2019-01-08 23:06:42
1 712
今天完成的事：修改任务6，用IE（ie8以上）浏览器浏览不出问题
明天的计划：下载任务7，开始做任务七
遇到的问题：
1、任务6在IE浏览器下访问显示不正常。
2、任务6底部的第二个div中的图片和文字显示不居中。
解决：
1、我任务六之前使用的是盒子模型（display：flex），我发现我加display: -ms-flexbox（这个是兼容IE浏览器）;display: -webkit-flex;然后并没有什么用。最后我直接使用的是浮动，占百分比的形式来解决。例如头部的导航蓝，我直接是让列表里面的三个li浮动左，然后宽度占33.3%。
2、底部中间的圆框住的编辑图标，我直接让它margin-left: 50%;然后transform: translateX(-50%);这样的话就居中了
今天的收获：
1、弹性盒子的兼容性只支持IE10以上，低于10版本的不支持。
2、使用浮动时，及时清除，不然会对后期的代码有影响。
3、居中和垂直的方法自己一定要记住最少三种，我记住的。水平居中：margin:0 auto ,left:50%,transform:translateX(-50%),text-aglin:center,flex。根据具体的需要进行选择使用哪一种更适合。
4、代码布局，能简单的就简单。不要搞复杂。例如列表li里的文字只需要显示，那么我们就没有必要加a标签，如果另有需求，那么可以加。
返回列表
评论