常见CSS的bug和解决方法(Hack)

最新推荐文章于 2024-08-23 13:45:24 发布

狂飙的肥兔

最新推荐文章于 2024-08-23 13:45:24 发布

阅读量449

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43417844/article/details/122395638

版权

在任何标签中插入图片时，图片会将元素下方撑大三像素（有可能是 >3像素）
- Hack
  - 给 <img> 添加声明：display: block;
  - 给 <img> 添加声明 vertical-align: top/middle;
    - 注意：vertical-align 只对行内块有效
  - 给 <img> 添加浮动，若父元素没有设置高度时要注意塌陷问题
  - 给父元素添加 font-size: 0;
  - 给父元素设置和图片一样的高度
当图片 ( 所有的行内元素和行内块元素 ) 横着排的时候，水平之间存在一定的间距
- Hack
  - 给他们添加浮动 img{ float: left; }
  - 将他们写在一行上
  - <a> 标签字体之间的间距：给 <a> 的父元素添加 font-size:0;，再给 <a> 添加正常的字体大小
图片添加上超链接之后，在IE上有边框
- Hack
  - 给 <img> 的边框设为0 img{ border: 0; }
  - 可以在重置样式的时候使用
表单元素距离顶部间距不一致 ( 不同的浏览器这个间距不一样 )
- Hack
  - 给表单元素添加声明 float: left;
cursor 属性的 hand 属性值只有IE9以下浏览器识别
- Hack
  - 实现某元素鼠标指针形状为手型用 cursor:pointer;
  - cursor: pointer; 是兼容的写法
  - cursor: hand; 是不兼容的写法
子元素没设置任何浮动，设置了 margin-top 属性后，会错误的把 margin-top 的属性值添加给父元素
- Hack
  - 给父元素添加 overflow: hidden;
  - 给父元素添加上边框 border-top: 1px solid transparent;
  - 父元素或者子元素浮动
margin 的外边距重叠问题
- Hack
  - 给其中的一个元素添加父元素，并且添加声明 overflow: hidden;
IE浏览器上的字体与别的浏览器不一样
- Hack
  - 在 <body> 里面用 font-family 重置样式