CSS浏览器兼容问题

♀尐吖头ヾ 提交于 2020-03-30 18:32:32

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 能显示背景颜色。

 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!