6
私は次のコードを持っています（ボーダーが表示されるはずです、なぜ彼らはデモで消滅したのかわかりません）、画面は8等分しており、それぞれの部分に波紋効果があります。 Chrome、Mozzila、Opera、Safariではすべて正常に動作しますが、IEでは要素のリップルがオーバーフローします。どうすれば修正できますか？CSSのアニメーションはdivをオーバーフローします
$(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);
}
}<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>
と私のために正常に動作しますはい、おかげでそれは本当に私を助けました。そして、配置を壊さないようにするために、私は表示を持っているラッパーでコンテンツをwrapしました：table – Cheese