css hack for IE

r囧r小猫 2023-06-30 10:44 28阅读 0赞

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

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

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

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

chrome  
![在这里插入图片描述][2020011709380848.png]  
IE  
![在这里插入图片描述][20200117093838795.png]

怎么办呢？  
解决方案是如常使用这个属性，毕竟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）了，什么

之类纯属扯淡，根本不起作用。

[CSS]: http://www.ruanyifeng.com/blog/2019/11/css-position.html
[sticky]: https://caniuse.com/#search=sticky
[2020011709380848.png]: https://img-blog.csdnimg.cn/2020011709380848.png
[20200117093838795.png]: https://img-blog.csdnimg.cn/20200117093838795.png