Css IE显示侧边栏转换不正确

我有一个侧边栏，可以用按钮键伸缩。所有动画都是css转换。在Firefox和Chrome中，它可以工作，但（一如既往）IE11看起来并不好看。这是因为menuitems中的文本在转换完成前的一瞬间分成了第二行。 和代码段（不带图标）。

$（“#按钮”）。单击（函数（）{
$（'.sidebaritem>span'）.css（'width'，'0px'）；
$（'.sidebaritem>span'）.css（'padding-left'，'0px'）；
$（'.sidebaritem>span'）.css（'padding-right'，'0px'）；
$（'.sidebar'）.css（'width'，'35px'）；
$（'.content'）.css（'margin-left'，'35px'）；
});
$（'#按钮2'）。单击（函数（）{
$（'.sidebaritem>span'）.css（'width'，'80%）；
$（'.sidebaritem>span'）.css（'padding-left'，'5px'）；
$（'.sidebaritem>span'）.css（'padding-right'，'5px'）；
$（'.sidebar'）.css（'width'，'250px'）；
$（'.content'）.css（'margin-left'，'250px'）；
});
。侧栏{
位置：固定；
宽度：250px；
身高：100%；
边框：1px实心#273238；
背景：#273238；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
显示：内联块；
溢出：隐藏；
}
.侧气压计{
光标：指针；
高度：35px；
}
.sidebaritem:悬停，
.sitebaritemhover{
背景：#212a2f；
}
.sidebaritem>*{
显示：内联块；
溢出：隐藏；
颜色：#AAA；
填充：0 5px 0px 5px；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.sidebaritem>.fa{
字体大小：20px；
}
.sidebaritem>span{
颜色：#AAA；
宽度：80%；
空白：nowrap；
线高：20px；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
.内容{
显示：内联块；
左边距：250像素；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}

项目1
项目2
项目3
项目4
内容
-
+
在js脚本中更改此行

$('#button').click(function() {
$('.sidebaritem > span').css('width', '0px');

致：

它应该会起作用

下面是一个片段：


$（“#按钮”）。单击（函数（）{
$（'.sidebaritem>span'）.css（'width'，'0%）；
$（'.sidebaritem>span'）.css（'padding-left'，'0px'）；
$（'.sidebaritem>span'）.css（'padding-right'，'0px'）；
$（'.sidebar'）.css（'width'，'35px'）；
$（'.content'）.css（'margin-left'，'35px'）；
});
$（'#按钮2'）。单击（函数（）{
$（'.sidebaritem>span'）.css（'width'，'80%）；
$（'.sidebaritem>span'）.css（'padding-left'，'5px'）；
$（'.sidebaritem>span'）.css（'padding-right'，'5px'）；
$（'.sidebar'）.css（'width'，'250px'）；
$（'.content'）.css（'margin-left'，'250px'）；
});
。侧栏{
位置：固定；
宽度：250px；
身高：100%；
边框：1px实心#273238；
背景：#273238；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
显示：内联块；
溢出：隐藏；
}
.侧气压计{
光标：指针；
高度：35px；
}
.sidebaritem:悬停，
.sitebaritemhover{
背景：#212a2f；
}
.sidebaritem>*{
显示：内联块；
溢出：隐藏；
颜色：#AAA；
填充：0 5px 0px 5px；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.sidebaritem>.fa{
字体大小：20px；
}
.sidebaritem>span{
颜色：#AAA；
宽度：40%；
空白：nowrap；
线高：20px；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
.内容{
显示：内联块；
左边距：250像素；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}

项目1
项目2
项目3
项目4
内容
-
+

$('#button').click(function() {
$('.sidebaritem > span').css('width', '0%');