首页 > 其他分享> 文章详细

css hack for IE

2020-01-17 10:44:28 阅读：245 来源： 互联网

标签：浏览器 area sticky CSS hack IE css 属性

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

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

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

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

chrome
在这里插入图片描述
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]-->

之类纯属扯淡。

左直拳博客专家发布了1104 篇原创文章 · 获赞 337 · 访问量 337万+ 他的留言板关注

标签：浏览器,area,sticky,CSS,hack,IE,css,属性
来源： https://blog.csdn.net/leftfist/article/details/104014179

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css hack for IE