CSS动画溢出了div

Question

我有下一个代码（应该显示边框，我不知道为什么它们在演示中消失了），屏幕分为8个相等的部分，每个部分应该是涟漪效应。一切都在Chrome，Mozzila，Opera，Safari中运行良好，但是IE中的元素溢出了波纹。我该如何解决？

    Mat& Mat::operator = (const Mat& m)
    {
        if( this != &m )
        {
            if( m.u )
                CV_XADD(&m.u->refcount, 1);
            release();
            flags = m.flags;
            if( dims <= 2 && m.dims <= 2 )
            {
                dims = m.dims;
                rows = m.rows;
                cols = m.cols;
line 573 >>>>   step[0] = m.step[0];
                step[1] = m.step[1];
            }
            else
                copySize(m);
            data = m.data;
            datastart = m.datastart;
            dataend = m.dataend;
            datalimit = m.datalimit;
            allocator = m.allocator;
            u = m.u;
        }
        return *this;
    }

$(document).ready(function () {
    $(".button_line").on('click', ".menu_button", function (e) {

        DoRipple($(this), e);

    });
});

var parent, ink, d, x, y;

function DoRipple(parent, e) {
    if (parent.find(".ink").length == 0) {
        parent.prepend("<span class='ink'></span>");
    }

    ink = parent.find(".ink");
    ink.removeClass("animate");

    if (!ink.height() && !ink.width()) {
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        ink.css({ height: d, width: d });
    }

    x = e.pageX - parent.offset().left - ink.width() / 2;
    y = e.pageY - parent.offset().top - ink.height() / 2;

    ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");

    function removeAnimationClass() {
        ink.removeClass("animate");
    }

    setTimeout(
    function () {
        ink.removeClass("animate");
    }, 650);
}

html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}

.equal, .equal > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 0 auto;
}

.button_line {
    height: 25%;
    width: 100%;
}

a.menu_button {
    width: 50%;
    height: 100%;
    float: left;
    background-color: white;
    display: table;
    border-collapse: collapse;
    text-decoration: none;
    color: black;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

    a.menu_button > .menu_button_content {
        display: table-cell;
        vertical-align: middle;
    }

    a.menu_button > .border_overlay {
        height:100%;
        width:100%;
        position:absolute;
            border-right: 1px solid #E6F0F0;
    border-bottom: 1px solid #E6F0F0;
    }

        a.menu_button > .menu_button_content > h2 {
            text-align: center;
            font-size: 1.1em;
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
        }

        a.menu_button > .menu_button_content > .menu_button_color_rectangle {
            padding: 0;
            width: 40px;
            height: 3px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
                background-color: #74dbce;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
                background-color: #509194;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
                background-color: #ff7662;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
                background-color: #ffd869;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
                background-color: #7b8dd8;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
                background-color: #bb5b91;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
                background-color: #a29994;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
                background-color: #f47b50;
            }

.ink {
    display: block;
    position: absolute;
    background: #006064;
    border-radius: 100%;
    transform: scale(0);
}
    /*animation effect*/
    .ink.animate {
        animation: ripple 0.65s linear;
    }

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

Answer 1

这是因为您display:table上的a.menu_buttom.替换为display:block。 ie

对我来说很好

$(document).ready(function () {
    $(".button_line").on('click', ".menu_button", function (e) {

        DoRipple($(this), e);

    });
});

var parent, ink, d, x, y;

function DoRipple(parent, e) {
    if (parent.find(".ink").length == 0) {
        parent.prepend("<span class='ink'></span>");
    }

    ink = parent.find(".ink");
    ink.removeClass("animate");

    if (!ink.height() && !ink.width()) {
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        ink.css({ height: d, width: d });
    }

    x = e.pageX - parent.offset().left - ink.width() / 2;
    y = e.pageY - parent.offset().top - ink.height() / 2;

    ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");

    function removeAnimationClass() {
        ink.removeClass("animate");
    }

    setTimeout(
    function () {
        ink.removeClass("animate");
    }, 650);
}

html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}

.equal, .equal > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 0 auto;
}

.button_line {
    height: 25%;
    width: 100%;
}

a.menu_button {
    width: 50%;
    height: 100%;
    float: left;
    background-color: white;
    display: block;
    border-collapse: collapse;
    text-decoration: none;
    color: black;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

    a.menu_button > .menu_button_content {
        vertical-align: middle;
    }

    a.menu_button > .border_overlay {
        height:100%;
        width:100%;
        position:absolute;
            border-right: 1px solid #E6F0F0;
    border-bottom: 1px solid #E6F0F0;
    }

        a.menu_button > .menu_button_content > h2 {
            text-align: center;
            font-size: 1.1em;
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
        }

        a.menu_button > .menu_button_content > .menu_button_color_rectangle {
            padding: 0;
            width: 40px;
            height: 3px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#residence {
                background-color: #74dbce;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#citizenship {
                background-color: #509194;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#forillegals {
                background-color: #ff7662;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#soonillegals {
                background-color: #ffd869;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#fastsearch {
                background-color: #7b8dd8;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#cooperation {
                background-color: #bb5b91;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#aboutapp {
                background-color: #a29994;
            }

            a.menu_button > .menu_button_content > .menu_button_color_rectangle#settings {
                background-color: #f47b50;
            }

.ink {
    display: block;
    position: absolute;
    background: #006064;
    border-radius: 100%;
    transform: scale(0);
}
    /*animation effect*/
    .ink.animate {
        animation: ripple 0.65s linear;
    }

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="button_line">
                <a class="ol-md-6 menu_button" id="Residence">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="ResidenceText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Residence %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="residence"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="CitizenshipText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Citizenship %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="citizenship"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="FastSearchText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, FastSearch %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="fastsearch"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="CooperationText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Cooperation %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="cooperation"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="ForIllegalsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, ForIllegals %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="forillegals"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="SoonIllegalsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, SoonIllegals %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="soonillegals"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="#">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="AboutAppText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, AboutApp %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="aboutapp"></div>
                    </div>
                </a>
                <a class="ol-md-6 menu_button" id="Settings">
                    <div class="border_overlay"></div>
                    <div class="menu_button_content">
                        <h2 id="SettingsText">
                            <asp:Literal runat="server" Text="<%$ Resources: Strings, Settings %>" />
                        </h2>
                        <div class="menu_button_color_rectangle" id="settings"></div>
                    </div>
                </a>
            </div>