Javascript CSS动画溢出div

我有下一个代码（边框应该显示出来，我不知道为什么它们在演示中消失了），屏幕被分成8个相等的部分，每个部分都应该有涟漪效应。在Chrome、Mozzila、Opera、Safari中都可以正常工作，但是ripple在IE中溢出了元素。我如何修复它

$（文档）.ready（函数（）{
$（“.button\u line”）。在（'click'，“.menu\u button”，函数（e）上{
多利波（$（本），e）；
});
});
变量父项、墨水、d、x、y；
函数（父函数，e）{
if（parent.find（“.ink”）.length==0）{
父项。前置（“”）；
}
ink=父项。查找（“.ink”）；
ink.removeClass（“动画”）；
如果（！ink.height（）&&！ink.width（））{
d=Math.max（parent.outerWidth（），parent.outerHeight（））；
css（{高度：d，宽度：d}）；
}
x=e.pageX-parent.offset（）.left-ink.width（）/2；
y=e.pageY-parent.offset（）.top-ink.height（）/2；
css（{top:y+'px'，left:x+'px'}）.addClass（“animate”）；
函数removeAnimationClass（）{
ink.removeClass（“动画”）；
}
设置超时(
函数（）{
ink.removeClass（“动画”）；
}, 650);
}

html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
.equal、.equal>div[class*='col-']{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
弹性：10自动；
}
.按钮线{
身高：25%；
宽度：100%；
}
a、 菜单按钮{
宽度：50%；
身高：100%；
浮动：左；
背景色：白色；
显示：表格；
边界塌陷：塌陷；
文字装饰：无；
颜色：黑色；
位置：相对位置；
溢出：隐藏；
光标：指针；
}
a、 菜单按钮>。菜单按钮内容{
显示：表格单元格；
垂直对齐：中间对齐；
}
a、 菜单按钮>.border\u覆盖{
身高：100%；
宽度：100%；
位置：绝对位置；
右边框：1px实心#E6F0；
边框底部：1px实心#E6F0；
}
a、 菜单按钮>菜单按钮内容>h2{
文本对齐：居中；
字体大小：1.1米；
字体系列：“Roboto”，无衬线；
字体大小：400；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形{
填充：0；
宽度：40px；
高度：3倍；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形{
背景色：#74dbce；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形{
背景色：#509194；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形非法者{
背景色：#ff7662；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形{
背景色：#ffd869；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形快速搜索{
背景色：#7b8dd8；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形合作{
背景色：#bb5b91；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形关于{
背景色：#a29994；
}
a、 菜单按钮>菜单按钮内容>菜单按钮颜色矩形设置{
背景色：#f47b50；
}
.墨水{
显示：块；
位置：绝对位置；
背景#006064；
边界半径：100%；
变换：比例（0）；
}
/*动画效果*/
.墨水{
动画：波纹0.65s线性；
}
@关键帧波纹{
/*将元素缩放到250%，以安全地覆盖整个链接并将其淡出*/
100% {
不透明度：0；
转换：比例（2.5）；
}
}

---

这是因为在

a.menu按钮上有一个
显示：表格
。

将其替换为

显示：块

。用ie对我来说很好

$（文档）.ready（函数（）{
$（“.button\u line”）。在（'单击'，''上。菜单\u按钮