zhangyuxiang1226 / blogs Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 0 B

blogs

blogs's People

Stargazers

Watchers

blogs's Issues

IE8兼容性：checkbox在 display:none;和visible:hidden;的情况下，label的点击和js都无法改变 checked状态

问题发现

IE8下 checkbox 隐藏时，label的点击和js都无法改变 checked状态，

1.当checkbox显示出来时，我们通过脚本显示其checked状态改变

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        #testCkb {

            /*display: none;*/
        }
    </style>
</head>
<body>
<label for="testCkb" class="ckb-label">
    <input type="checkbox" id="testCkb">点击勾选
</label>
<script>
    console.log($("#testCkb").prop("checked"));
    $(".ckb-label").click(function () {
        console.log($("#testCkb").prop("checked"));
    });
</script>
</body>
</html>

2.使用`display:none;`隐藏 checkbox，点击label后，checked属性无法发生改变

3.使用`visibility:hidden;`隐藏checkbox，点击label，checked属性依然无法改变

总结

开发中对checkbox美化时，如果需要兼容IE8，那么不要采用 display:none 或者 visibility:hidden，这样会时checked属性不能正常切换；
可以采用绝对定位方式，用美化的图层设置z-index高于该checkbox

浏览器兼容性：FF不识别 background-position-y

发现

在项目中对同一拼图复用时，为简化代码，采用 background-position-y来重置不同元素的背景图

兼容性问题

在最新版 FF(45.0)中依然不支持

.box1,.box2 {
   background-image(img/bg.jpg);
   background-repeat:no-repeat;
   background-position: 0 -10;
}
.box2 {
    background-position-y: -20px;
}

在FF下是不识别的

So 如果项目需要兼容所有主流浏览器，那么避开使用 background-position-y吧

布局：inline-block下元素位置向下偏移

问题发现

项目中一竖列表采用 dl:dd:a 的层级搭建，其中为使a元素填充dd，采用inline-block；

代码片段

.help-menu dt, .help-menu dd {
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #f3f3f5;
}
.help-menu dt {
    background-color: #f3f3f3;
    padding-left: 44px;
}
.help-menu dd a {
    color: #2b2b2b;
    font-size: 13px;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 30px;
    text-decoration: none;
}

以上省略hover效果，hover时背景变色并带有渐变
效果：

可见a元素与上边距有1px的间隔，且通过对a设置高度和行高都不能生效，且父元素没有任何padding或margin挤压位置

解决办法

对a的display:inline-block改为使用 display:block;

总结

在行内元素需要设置宽高占满父容器时，而且同块内没有其他元素时，可以考虑设置为 display:block;
inline-block在垂直居中等问题上也比较难把握。
更多关于inline-block的可以参考张鑫旭老师的 http://www.zhangxinxu.com/wordpress/tag/inline-block/

zhangyuxiang1226 / blogs Goto Github PK

blogs's People

Stargazers

Watchers

blogs's Issues

问题发现

1.当checkbox显示出来时，我们通过脚本显示其checked状态改变

2.使用display:none;隐藏 checkbox，点击label后，checked属性无法发生改变

3.使用visibility:hidden;隐藏checkbox，点击label，checked属性依然无法改变

总结

发现

兼容性问题

So 如果项目需要兼容所有主流浏览器，那么避开使用 background-position-y吧

问题发现

代码片段

解决办法

总结

Recommend Projects

Recommend Topics

Recommend Org

2.使用`display:none;`隐藏 checkbox，点击label后，checked属性无法发生改变

3.使用`visibility:hidden;`隐藏checkbox，点击label，checked属性依然无法改变