纵有疾风起
人生不言弃

Html+Css实训总结——-bug收集

一、圆角按钮button点击后出现矩形框线

错误示例

Html+Css实训总结——-bug收集插图

解决方式:

{outline:none}

解决之后的正确示例

Html+Css实训总结——-bug收集插图1

二:图标引用方法混乱

方法1

@font-face {

    font-family: ccy;

    src: url(“../font/fontAbout/iconfont.woff”);

    src: url(“../font/fontAbout/iconfont.ttf”);

}

span{

  font-family:ccy

}

<span>&xe9b2</span>

Html+Css实训总结——-bug收集插图2

其中@font-face 在自定义字体以便以后引用,后缀名为woff即为火狐浏览器适配,后缀名为tff即为谷歌浏览器适配文件

方法2:

<head>

  <link rel=”stylesheet” href=”../font/fontAbout/iconfont.css”>

  </head>

  <body>

  <span class=”iconfont icon-twitter”></span>

Html+Css实训总结——-bug收集插图3

ps:字体库路径不能错误

三、固定定位显示问题

设定position:fixed后,红圈部分被覆盖 错误示例:

Html+Css实训总结——-bug收集插图4

解决方法: 给下面的第一个部分设置margin-top:(nav高度)即可 正确示例:

Html+Css实训总结——-bug收集插图5

四、选择器问题

Html+Css实训总结——-bug收集插图6

伪类选择器过于复杂

解决方法:给每个大类取名字,小的用伪类选择器

五、按钮旋转抖动问题

错误示例: 在选中按钮时旋转后依旧是选中状态出现抖动

解决方法: 给按钮外面加一个正方形div,用他控制按钮的旋转

六、placeholder颜色问题

input::-webkit-input-placeholder{

    color: #213869;

    margin-left: 20px;

    font-size: 25px;

}

::-moz-placeholder{

    color: #213869;

    font-size: 18px;

    opacity: 1;/*这里之前是没有的,发现问题后才加上去的*/

}

火狐浏览器的适配器需要加一个透明度设置才能显示出来

Html+Css实训总结——-bug收集插图7

作者:学致前端

原文地址:https://mp.weixin.qq.com/s/NJeYyZkZVY6uFQVjeulkYw

来源:微信公众号

文章著作权归作者所有,如有侵权,请联系小编删除。

文章转载于:https://www.jianshu.com/p/4e7bf42d1da5

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » Html+Css实训总结——-bug收集
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录