Question

px

当我用%或calc替换高度属性中的calc时，转换工作正常，但使用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; }，只是从一个高度转到另一个高度而没有转换。< / p>

在其他浏览器中它工作正常，问题仅出现在IE

中

添加与我的实际情况类似的代码和JSFiddle example。

<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>设置为vh并且仅更改高度，它也有效但由于IE中的错误，只会从一个高度变为另一个高度这就是我模拟效果，改变顶部位置和高度的原因。

那么，我怎样才能在IE中模拟这种效果？

注意：我无法使用视口单元：vw，top: value。

PD：在我的情况下IE的罕见行为是因为从top: otherValue到height: calc(value)的转换有效，但是从height: calc(otherValue)到class TestingApp(App): def build(self): parent = FloatLayout() keepbtn = Button(pos= (10,10),text='Accept Shape',size_hint=(.25, .15),font_size=14, color=(0.960784, 1, 0.980392,1), background_normal = '',\ background_color= ( 0.0980392, 0.0980392, 0.439216,1), font_name='Exo2-Bold.otf') restartbtn = Button(text='Restart',size_hint=(.2, .15),font_size=14, color=(0.960784, 1, 0.980392,1), background_normal = '',\ background_color= (0.0980392, 0.0980392, 0.439216,1), font_name='Exo2-Bold.otf') renderbtn = Button(text = "Render Shape", size_hint=(.2, .15),font_size=14, color=(0.960784, 1, 0.980392,1), background_normal = '',\ background_color= ( 0.0980392, 0.0980392, 0.439216,1), font_name='Exo2-Bold.otf') parent.add_widget(keepbtn) parent.add_widget(restartbtn) parent.add_widget(renderbtn) # if free draw option painter = FreeDraw() keepbtn.bind(on_press=painter.acceptshape) restartbtn.bind(on_press=painter.restart) renderbtn.bind(on_press=painter.render) parent.add_widget(painter) # # if preloaded box return parent if __name__ == '__main__': TestingApp().run()的过渡没有，这是只是为了指导。

Answer 1

this怎么样？就像你的代码片段一样（在我看来），它在IE10 / IE11中没问题。或者我不了解你的真实情况。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何使用calc属性在IE中使转换属性工作？

1 个答案: