如何使用calc屬性在IE中創建轉換屬性？

element1 { 
    height: calc(100% - 50px); 
    -webkit-transition: .5s; 
    -moz-transition: .5s; 
    -ms-transition: .5s; 
    -o-transition: .5s; 
    transition: .5s; 
} 

element1:hover { 
    height: calc(100% - 200px); 
}

當我通過px或%替換height屬性的計算，轉變工作正常，但與calc，只是從一個高度去到另一個沒有過渡。如何使用calc屬性在IE中創建轉換屬性？

在其他的瀏覽器，它工作正常，問題只在IE

添加類似於我的真實情況的代碼和JSFiddle example。

div{ 
 
    position: fixed; 
 
    right: 0; 
 
    width: 250px; 
 
    height: calc(100% - 200px); 
 
    background: #1c8080; 
 
    top: 158px; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding-top: 40px; 
 
    font-size: 18px; 
 
    border: 1px solid #000; 
 
    
 
    -webkit-transition: all .3s; 
 
    -moz-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 

 
div:hover{ 
 
    height: calc(100% - 100px); 
 
    top: 58px; 
 
} 
 

 
.bottom{ 
 
    position: absolute; 
 
    bottom: 15px; 
 
    width: 100%; 
 
    font-size: 26px; 
 
}

<div> 
 
    <p>Height's tansition</p> 
 
    <p>Works fine in Chrome, FF</p> 
 
    <p class="bottom">But not in IE</p> 
 
</div>

是的，我知道，在我的情況下，設置bottom: 0到<div>，只有改變高度，它也可以，但由於IE瀏覽器的漏洞，只有變化從一個高度到另一個，這就是爲什麼我模擬效果，改變頂部位置和高度。

那麼，如何在IE中模擬這種效果呢？

注意：我不能使用視口單元：vh,vw。

PD：罕見的行爲與IE瀏覽器在我的情況是因爲從top: value到top: otherValue作品從height: calc(value)到height: calc(otherValue)過渡，但過渡不，這只是引導。

來源

2015-06-02 Yandy_Viera

我知道這不完全是你在做什麼，但有已知的bug在IE10-11爲'calc'在'transforms'使用。看到[這裏]（https://connect.microsoft.com/IE/feedback/details/814380/），它們可能是相關的 – zgood

謝謝你，我發現這個鏈接在你發佈的https://connect.microsoft .com/IE/feedback/details/762719/css3-calc-bug-inside-transition-or-transform 這裏的Internet Explorer團隊承認它是一個bug並且說：「我們能夠驗證您的反饋，基於此錯誤可能具有的有限影響，我們將無法在此版本中解決此錯誤。「 –

您是否可以添加接近實際情況的工作代碼片段？也許可以用額外的HTML佈局來解決這個問題。 –

this怎麼樣？像你的代碼片段一樣工作（在我看來），在IE10/IE11中可以。或者我不瞭解你的真實情況。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div { 
 
    position: fixed; 
 
    right: 0; 
 
    width: 250px; 
 
    bottom: 0; 
 
    background: #1c8080; 
 
    top: 158px; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding-top: 40px; 
 
    font-size: 18px; 
 
    border: 1px solid #000; 
 
    
 
    -webkit-transition: all .3s; 
 
    -moz-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 

 
div:hover { 
 
    top: 58px; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    width: 100%; 
 
    font-size: 26px; 
 
}

<div> 
 
    <p>Height's transition</p> 
 
    <p>Works fine in Chrome, FF</p> 
 
    <p class="bottom">But not in IE</p> 
 
</div>

來源

2015-06-13 10:18:06

是的，它的作用，但問題是，我不知道底部會在哪裏，我只是把它作爲一個例子，但我真的不知道它會在哪裏。看看這個例子http://jsfiddle.net/Yandy_Viera/jgh0k25r/ –

@YandYViera在你的第一個代碼片段中（類似於你所說的真實情況），你使用'position：fixed'。在這種情況下，你總是知道你的「頂」，「右」，「底」，「左」（相對於視口）。在你的第二種情況下，你使用'position：absolute'並且說你不知道底部會在哪裏。我不明白你的真實情況，你爲什麼要使用'height：100％'？如果父母元素太小會怎麼樣？例如http://oi60.tinypic.com/vpu9gi.jpg。 –

你是對的，我直到現在才意識到，如果我有頂部和頂部的高度，我可以計算底部，即使在我的特殊情況下：絕對的，所以你的答案解決了我的問題，我真的很感激。 –

如何使用calc屬性在IE中創建轉換屬性？

回答

相關問題