我有下一个代码(应该显示边框，我不知道为什么它们在演示中消失了)，屏幕被分成 8 个相等的部分，每个部分都应该有涟漪效果。在 Chrome、Mozzila、Opera、Safari 中一切正常，但在 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: 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>
最佳答案
这是因为您的 a.menu_buttom 上有一个 将其替换为 display:table。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>
关于javascript - CSS动画溢出div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33275000/
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
