zoukankan      html  css  js  c++  java
  • css兼容

    1、li列表的bug

        A当父元素li有float子元素a没有设置浮动时会出现垂直bug

        hank:给父元素li和子元素都设置浮动

        B当li中的a转成block并且有height并有float的li中设置浮动会出现阶梯显示

        hank:给li加float

    2、marginBUG

        A:描述:当前元素与父元素没有设置浮动情况下设置margin-top会出现错误的加在父元素上

        hank:给父元素和子元素加overflow:hidden

        hank:给父元素和子元素加浮动

        B:描述:当上下排列的元素上元素有margin-bottom:30px下元素有margin-top:20px他们

             中间的间距不会叠加而是会设置较大的值

             hank:把margin值加在一个元素上

             hank:给上或下元素套一个div给div加overflow:hidden

    3、按钮元素默认大小不一

            各个浏览器中按钮元素大小不一

            hank1:统一大小(用a标签模拟)

            hank2:input外面套一个标签在这个标签里直接写按钮的样式把input边框去掉

            hank3:如果这个按钮是一个图片直接把图片作为按钮背景即可

    4、百分比的bug

            百分比bug在ie6及更低版本浏览器解析百分比时会按照四舍五入导致50%+50%》100%

            hank:给右边的浮动元素添加声明clear:right

    5、表单元素行高对齐不一致

            form里的input select表单元素的行高对齐方式不一致

             hank:给表单元素加float:left

    6、高度自适应出现高度塌陷

            hank1:给父级元素添加声明overflow:hidden

            hank2:在浮动元素下方添加空的div病添加声明div{clear:both;height:0;overflow:hidden}

            hank3:万能清除法ie6不支持div:after{content:".";clear:both;display:block;

                        height:0;overflow:hidden;visibility:hidden;}

    7、块级元素默认高度

            描述:在ie6及以下版本中部分块元素拥有默认高度(小于20px在16px左右)

            hank:给元素添加声明:font-size:0

            hank:给元素添加声明:overflow:hidden

    8、鼠标指针

            描述:cursor属性的hand值只有在ie9以上识别其他浏览器不支持cursor的pointer属性只有

            在ie6以上版本及其他内核浏览器都支持

            hank:统一鼠标元素鼠标指针形状为手型cursor:pointer

    9、双倍边距

            当ie6及更低版本浏览器解析浮动元素时会错误把浮向边边界margin加倍显示

            hank:给浮动元素添加声明display:inline

    10、透明度的兼容

            div{opacity:0.5;filter:alpha(opacity=50)}

    11、图片的间隙

                    img{display: block;}

           a、在div中的图片间隙

           b、在div中的图片会在div下方撑大3px

                 hank1:div和img写在一行上

                 hank2:img转成块元素给img添加display:block

           c、图片水平居中不起作用加

                margin:0 auto

          d、 dt li 中的图片间隙

                 img添加display:block

    12、图片有边框

            img{border:0;}

    13、当图片加在a标签上时会出现边框

             hank:给图片加border:0或border:none

    14、最小高度自适应的兼容

            min-height属性ie浏览器不识别

            hank1:min-height:100px;_height:100px

            hank2:min-height:100px;height:auto!important;height:100px

  • 相关阅读:
    iOS有用的三方库和高效工具记录
    正则表达式
    Exception Type & Exception Code
    信鸽推送(XGPush)
    在vue中使用animate.css
    vue 中父子组件传值:props和$emit
    预编译scss以及scss和less px 转rem
    ES6箭头函数及模版字符串
    移动端页面a input去除点击效果及pc端切换
    vue2搭建简易spa
  • 原文地址:https://www.cnblogs.com/zhangshuda/p/7640414.html
Copyright © 2011-2022 走看看