zoukankan      html  css  js  c++  java
  • CSS浏览器兼容问题

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

     
  • 相关阅读:
    02、Rendering a Triangle
    [转]Unity性能优化之Draw Call
    [转]Directx11 3D空间坐标系认识
    设置让EditPlus不产生BAK文件
    深度优先搜索与广度优先搜索对比
    python多重继承新算法C3
    php的垃圾回收机制
    python脚本自动发邮件功能
    python的keyword模块
    EditPlus如何设置——自动换行
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/5535220.html
Copyright © 2011-2022 走看看