用于 Internet Explorer 的 CSS 后备

Posted 2023-03-06

【中文标题】用于 Internet Explorer 的 CSS 后备

【英文标题】：CSS fallback for Internet explorer

【发布时间】：2014-07-24 08:08:01

【问题描述】：

我想在网站中实现 CSS 3d 效果。除了 Internet Explorer（包括 IE 11），我已经让它在所有东西上都可以工作。如果我是正确的，IE 不支持preserve-3d？有人能帮我实现一个回退到 IE 可以使用诸如淡入淡出或向上滑动过渡之类的代码吗？

这里是代码。

CSS

.cube 
width: 100%;
text-align: center;
margin: 0 auto;
height: 200px;
-webkit-transition: -webkit-transform .43s;
transition: transform .43s; 
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;



.cube:hover 
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg); 


.before,.after 
background: rgb(247, 247, 247);
border: 4px solid rgba(147, 184, 189, .0);
height: 200px;
padding: 20px;
cursor: pointer;


.before 
font-family: 'OpenSansLight';
font-size: 28px;
letter-spacing: 0.5px;
line-height: 40px;
margin-top: 10px;
margin-bottom: 10px;
color: #444444;
border: 2px solid #EFEFEF;
background: #ffffff;
-webkit-transform: translateZ(110px);
transform: translateZ(110px);


.after 
font-family: 'OpenSansLight';
font-size: 16px;
letter-spacing: 0.5px;
line-height: 30px;
margin-top: 10px;
margin-bottom: 10px;
color: #f8f8f8;
background: #CF222D;
Border-bottom: 8px solid #b81a24;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
-webkit-transform: rotateX(-90deg) translateZ(-110px);
transform: rotateX(-90deg) translateZ(-110px);

HTML

<div class="cube">
<div class="before">'
<strong>Before</strong>
</div>
<div class="after">
<strong>After</strong>
</div>
</div>

【问题讨论】：

如果你只是想定位 IE，你总是可以使用条件 cmets，因为只有 IE 会响应它们。

IE11 已经删除了我相信的条件 cmets

您可以使用modernizr 来检测浏览器是否支持preserve-3d，如果不支持则应用不同的动画。

【参考方案1】：

您可以使用此媒体查询来定位 IE，请注意此媒体查询将针对 IE 10 和 11。-ms-high-contrast 是仅在 IE 上可用的设置，因此此查询将仅针对 IE。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
/* IE10+ CSS styles go here */

当然，对于较低版本的 IE，您可以使用条件 cmets。

【讨论】：

但这不也针对 Edge（甚至 Edge chromium）吗？