博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS浏览器兼容问题
阅读量:5976 次
发布时间:2019-06-20

本文共 1606 字,大约阅读时间需要 5 分钟。

1. IE6 下双倍浮动问题,display: inline 因为元素是浮动的,display 属性不会影响显示方式。

2. IE6 3px 文本偏移bug,浮动元素设置 margin-right: -3px。
3. min-width 和 min-height 只有 IE6不支持, 对于 height IE6 默认为最小高度,但是width 不是最小宽度。
4. <div><img src='1.jpg' /></div>
所有浏览器图片下方有空隙,通过设置如下属性可以避免。img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom
5. 如何让元素与文本输入框居中对齐,只要设置 输入框 vertical-align: middle; 元素设置 display: inline 或者 display: inline-block;
6:定义 1px 在IE6 下,设置 { height: 1px; overflow: hidden; } 或者 zoom: 0.07(小于 0.07也可)
7: hack:
   _ IE6 支持;
  * IE6 和 IE7;
  \9 IE6和IE6+浏览器 Chrome 和Firefox 不支持
  \0 IE8 和 IE8+ 支持

  !important 所有浏览器都识别,所有浏览器都认为它的优先级最高,除了IE6不会提高它的优先级。

  div { background:red; background:green !important;}
  或div { background:green !important; background:red; }
  除了 IE6, 所有浏览器都为 绿色,IE6 第一个为绿色,第二个为红色,所以建议 important 放在后面来写。 如果写成 div { background:green !important;} IE6 下也是绿色的。
8: Firefox 对于输入框input 不能设置 line-height的值,而chrome 默认input 里的文字就是垂直居中,设置line-height 只有大于input 的高度才起作用,所以一般通过 padding 填充input 框的高度。
chrome 中文版本不能设置 font-size 小于12px。
9: 盒子模型: IE6 在混杂模式下使用自己的非标准盒模型 width = 内容 + 内边距 + 边框总和。
10: 对于行内元素 比如 span, 设置 width height margin-top margin-bottom padding-top padding-bottom border-top border-bottom是不起作用的, 而 line-height margin-left margin-right padding-left padding-right border-left border-right 是起作用的。
专业术语: 垂直内边距、垂直边框和垂直外边距 不影响行内框的高度,修改行内框的尺寸的唯一方法是修改行高或者 水平内边距、水平边框和水平外边距。
PS: 虽然 padding-top padding-bottom border-top border-bottom 不能改变行高,但是border-top 和 border-bottom 设置完能显示上下边框, 而当这个元素设置背景颜色的时候 padding-top padding-bottom 能显示背景颜色。

 

转载于:https://www.cnblogs.com/zhengming2016/p/5535220.html

你可能感兴趣的文章
Flutter开发环境安装
查看>>
QQ登录的那些坑(如何开发qq登陆功能)
查看>>
中大型网站技术架构演变过程
查看>>
深入剖析OkHttp系列(五) 来自官方的事件机制
查看>>
Java 9 CompletableFuture 进化小脚步
查看>>
【前端词典】进阶必备的网络基础(下)
查看>>
Sigo全面适合交易新手以及专业交易者
查看>>
AppLaunchScreen/Screenshot(启动图/屏幕快照)输出规范
查看>>
React状态管理大乱斗,横向对比Dva,Rematch,Mirror
查看>>
ARTS训练第三周
查看>>
基本操作题
查看>>
unicone 字体 规范
查看>>
浅显易懂的跨域理解
查看>>
Leetcode PHP题解--D25 500. Keyboard Row
查看>>
简化路径
查看>>
让Redis突破内存大小的限制
查看>>
安全研究人受够!再公布WordPress 3大外挂漏洞
查看>>
12月21日云栖精选夜读:阿里云总裁胡晓明:AI泡沫过后,下一站是“产业AI”...
查看>>
除了BAT,国内还有哪些值得关注的人工智能公司?
查看>>
一出好戏不止是部电影,它也正接近你的生活。
查看>>