css hack for IE

IE是最恶心人的一款浏览器。但预计在2020年,我们弄的那些个WEB系统还是要兼容它。

这种老而不,好多CSS属性都不支持。因此,在开发过程中,要照顾照顾它。下面以css一个定位属性sticky为例,介绍如何在IE浏览器中也能适应,不至于走样或者避免走样太多。

sticky可以起到“动态固定”等的效果,但IE不支持。

CSS 定位详解
查询是否支持sticky

chrome
css hack for IE
IE
css hack for IE

怎么办呢?
解决方案是如常使用这个属性,毕竟chrome是主流,这个属性也起到好的效果。但如果检测在IE下,则自动降级,退而求其次,用别的方法来达到类似的效果。

        .area-btn{
            /* 从效果上看,浏览器对于不能识别的属性,处理办法应该是忽略 */
            position:absolute;/* IE能识别 */
            position: -webkit-sticky; /* safari 浏览器 */
            position: sticky; /* 其他浏览器 */
            top:0;
            left:0;
            width:100%;
            height:30px;
            padding:5px 0;
            text-align: center;
        }
        .area-detail{
            padding:10px;
            border:solid 1px red;
        }
        /* 利用媒体查询,判断当前是IE的话,则做相应设置 */
        /* IE 10+ */
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            .area-detail{
                /*margin-top:40px;*/
            }
        }

判断浏览器是否IE,在CSS里,目前似乎只能用媒体查询(@media)了,什么

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

之类纯属扯淡。

css hack for IEcss hack for IE 左直拳 博客专家 发布了1104 篇原创文章 · 获赞 337 · 访问量 337万+ 他的留言板 关注
上一篇:HACK TEH BOX - Under Construction(JWT密钥混淆 + SQL注入)


下一篇:《编写可读代码的艺术》《第5章 该写什么样的注释》