CSS過渡在IE中不起作用
[英]CSS Transitions Not Working in IE
問題描述
我的CSS遇到了一個奇怪的問題。 該代碼涉及以矩形形狀格式化的標簽，並且在懸停時，這些形狀從具有綠色背景的白色文本變為具有白色背景的綠色文本。 之前，我已經使用CSS過渡來制作這種動畫（並且它也已在IE中起作用），所以我對於為什么現在不起作用感到完全困惑。 它可以在Chrome和Firefox中完美運行，但在IE中則什么也不做。 它甚至不會改變顏色。
這是我的CSS：
#wrapper {
width: 70%;
margin-top: -1%;
margin-left: auto;
margin-right: auto;
min-width: 950px;
text-align: center;
}
#header {
padding: 10px;
text-align: center;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
}
#header img {
max-width: 100%;
}
a {
float: left;
position: relative;
display: inline-block;
margin-top: 2%;
margin-right: 1.5%;
width: 32.3%;
padding-top: 5%;
padding-bottom: 5%;
background-color: #259b24;
opacity: 0.8;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5);
text-align: center;
text-decoration: none;
color: white;
letter-spacing: 6px;
text-transform: uppercase;
font-weight: normal;
-o-transition: background-color .2s, color .2s;
-webkit-transition: background-color .2s, color .2s;
-ms-transition: background-color .2s, color .2s;
transition: background-color .2s, color .2s;
font-size: 20px;
}
a:hover {
background-color: #FFFFFF;
color: #259b24;
}
#right1, #right2 {
margin-right: 0;
}
a::first-line {
letter-spacing: 6px;
font-size: 40px;
}
這是我的HTML：
<body>
<div id="wrapper">
<div id="header">
<img src="logo.png" />
</div>
<a href="google.com" id="left1">General<br />Dermatology</a>
<a href="google.com" id="middle1">About Us<br /> </a>
<a href="google.com" id="right1">Cosmetic<br />Dermatology</a>
<a href="google.com" id="left2">Patient<br />Resources</a>
<a href="google.com" id="middle2">News<br /> </a>
<a href="google.com" id="right2">Live Chat<br />Contact Us</a>
</div>
</body>
任何幫助將不勝感激。 謝謝！
2 個解決方案
解決方案1
1 2014-11-01 21:48:04
問題在於錨元素上的float和display：inline-block屬性。 從v9開始，過渡就可以在IE上運行。 但是，如果您在CSS3方面遇到此類問題，尤其是在IE中，當書中說它們應該工作時，我經常會發現它是將它們與某些其他屬性結合在一起的原因。 在這種情況下，浮點數總是有點麻煩，而inline-block屬性是另一個值得一看的屬性。
在這種情況下，如果將它們都從{...} CSS中移出，則過渡效果很好（但是，當然，您的布局被淹沒了）。 我在這里把它擺成小提琴：jsfiddle.net/pyz6z9fk/我正在為此使用IE11。
因此在我看來，您似乎需要或者以其他方式來實現布局，或者要忍受直到（可能是！）某些將來版本才能在IE中工作的過渡。 如何將此顯示內容放入CSS表中以使您的布局正常工作？
解決方案2
0 2014-11-01 20:29:43
http://www.w3schools.com/cssref/css3_pr_transform.asp
嘗試添加-ms-transform：
CSS轉換功能可以在IE中正常運行，只要其版本為9以上，此網站就是瀏覽器支持信息的好資源：
CSS3過渡在IE中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.