我正在尝试使用CSS来设置我网站上'div'的高度。
它在FF和Safari上完美运行，但在Chrome上却有一种奇怪的行为。
我有4个'div'，当点击它们时，它们会伸展显示整个包含文本，然后再次点击它们会收缩并变为隐藏状态。在Chrome上点击其中一个后，他们全部展开到全高，然后，当动画结束时，返回到它们应该在第一个位置的高度。
您可以在http://www.wefind-tech.com/WhatIsIt_ChromeV.html
上看到有解决方法吗？
由于
埃雷兹
CSS是：
.WeFind_Div_PunchLine::first-letter{
font-weight: bold;
font-size: 20px;
}
.WeFind_Div_PunchLine{
width: 95%;
line-height: 40px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
border: 1px solid #CCCCCC;
border-radius:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
box-shadow: 10px 10px 5px #CCCCCC;
-webkit-box-shadow: 10px 10px 5px #CCCCCC;
-moz-box-shadow: 10px 10px 5px #CCCCCC;
-o-box-shadow: 10px 10px 5px #CCCCCC;
}
.WeFind_Div_Contructed{
height: 0px;
overflow: hidden;
}
/*VERTICAL EXPAND element animation*/
@keyframes WeFimd_Anim_Expand{
from {height: 0px;}
to {height: 150px;}
}
@-moz-keyframes WeFimd_Anim_Expand /* Firefox */{
from {height: 0px;}
to {height: 150px;}
}
@-webkit-keyframes WeFimd_Anim_Expand /* Safari and Chrome */{
from {height: 0px;}
to {height: 150px;}
}
@-o-keyframes WeFimd_Anim_Expand /* Opera */{
from {height: 0px;}
to {height: 150px;}
}
/*VERTICAL CONTRUCT element animation*/
@keyframes WeFimd_Anim_Contruct{
from {height: 150px;}
to {height: 0px;}
}
@-moz-keyframes WeFimd_Anim_Contruct /* Firefox */{
from {height: 150px;}
to {height: 0px;}
}
@-webkit-keyframes WeFimd_Anim_Contruct /* Safari and Chrome */{
from {height: 150px;}
to {height: 0px;}
}
@-o-keyframes WeFimd_Anim_Contruct /* Opera */{
from {height: 150px;}
to {height: 0px;}
}
.WeFind_Div_Expand{
overflow: hidden;
animation-fill-mode: both;
animation: WeFimd_Anim_Expand 1s;
-moz-animation: WeFimd_Anim_Expand 1s; /* Firefox */
-moz-animation-fill-mode: both;
-webkit-animation: WeFimd_Anim_Expand 1s; /* Safari and Chrome */
-webkit-animation-fill-mode: both;
-o-animation: WeFimd_Anim_Expand 1s; /* Opera */
-o-animation-fill-mode: both;
}
.WeFind_Div_Contruct{
overflow: hidden;
animation-fill-mode: both;
animation: WeFimd_Anim_Contruct 1s;
-moz-animation: WeFimd_Anim_Contruct 1s; /* Firefox */
-moz-animation-fill-mode: both;
-webkit-animation: WeFimd_Anim_Contruct 1s; /* Safari and Chrome */
-webkit-animation-fill-mode: both;
-o-animation: WeFimd_Anim_Contruct 1s; /* Opera */
-o-animation-fill-mode: both;
}
HTML是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WeFind web site, What is WeFind</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./CSS/WeFindAnimations.css">
<link rel="stylesheet" type="text/css" href="./CSS/WeFind.css">
<script>
if (navigator.appName == 'Microsoft Internet Explorer') window.location = "./WhatIsIt_IEVer.html";
function ResetAllElement(ElementName){
var CurentElement = ElementName.substring(0,1);
for (var Index = 1; Index < 5; Index++){
if (Index != CurentElement && document.getElementById(Index + '_DivContent').getAttribute('class').indexOf('WeFind_Div_Expand') > 0){
document.getElementById(Index + '_DivContent').setAttribute('class', 'WeFind_Text_Body WeFind_Div_Contruct');
document.getElementById(Index + '_DivContentLineExpander').src = "./Images/ArrowDown.png";
}
}
}
function ToggleExpandContruct(ElementName){
if (document.getElementById(ElementName).getAttribute('class').indexOf('WeFind_Div_Expand') > 0){
document.getElementById(ElementName + 'LineExpander').src = "./Images/ArrowDown.png";
return('WeFind_Text_Body WeFind_Div_Contruct');
}
else{
document.getElementById(ElementName + 'LineExpander').src = "./Images/ArrowUp.png";
return('WeFind_Text_Body WeFind_Div_Expand');
}
}
</script>
</head>
<body>
<table class="WeFind_Table_Stretched">
<tr>
<td class="WeFind_Table_CellHorizontalSpacer170px"> </td>
<td class="WeFind_Table_Cell_PortrateText">
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('0_DivContent');">WeFind, A community obligated to create a safe living environment for all.</div>
<div id="0_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('1_DivContent'); document.getElementById('1_DivContent').setAttribute('class', ToggleExpandContruct('1_DivContent'));">
The power of "community bond" and "community commitment"
<img id="1_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="1_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
The WeFind community utilizes the power of "community bond" and "community commitment" to create a safe living environment for loved ones, the elderly and the challenged, a safe environment for everyone.
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('2_DivContent'); document.getElementById('2_DivContent').setAttribute('class', ToggleExpandContruct('2_DivContent'));">
The power of the masses
<img id="2_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="2_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
WeFind uses the power of the masses to create a safety net, continuously alert and ready to provide both passive and active assistance to anyone in need. That net is widely spread and instantaneously available. The ability to be where help is needed fast, and the ability to spread a "Call For Help", enables the WeFind community to provide immediate aid, prevent harm, providing support effectively and instantaneously.
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('3_DivContent'); document.getElementById('3_DivContent').setAttribute('class', ToggleExpandContruct('3_DivContent'));">
Created by a cheap, wearable location sensitive device.
<img id="3_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="3_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
The WeFind community safety net is created by a cheap, wearable location sensitive device and a mobile phone application. That device is attached to a kid, an elderly person, a challenged child or just anyone you. The device is sending location and status information to the WeFind community datacenter. Based on that location the community is able to receive alerts, when the one wearing the device needs assistance or is lost, and display messages which enable the community to monitor the whereabouts of that someone.
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('4_DivContent'); document.getElementById('4_DivContent').setAttribute('class', ToggleExpandContruct('4_DivContent'));">
There is no safety witout privacy !
<img id="4_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="4_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
Data regarding each device is distributed based on the relations between the one wearing the device and the one receiving the information. Close relatives (Father, Mother, etc.' ...) receive detailed information while other people are filtered out. <span class="WeFind_Text_Body WeFind_Text_BodyUnderlined">Privacy is a key element in the WeFind community</span>; it is one of <span class="WeFind_Text_Body WeFind_Text_BodyUnderlined">the main building blocks of maintaining a safe environment</span>.
</div>
<p class="WeFind_Text_Body">
<center><img src="./Images/WeFind_CommunityHelp.png" width="600px"/><center>
</p>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
看起来你有很多代码来实现最终结果。您可能想要查看jQuery的幻灯片切换功能。 http://api.jquery.com/slideToggle/这应该消除所有css动画和你拥有的javascript的需要。
在jQuery中，您可以执行以下操作：
$('h3').click(function(){
$('p').slideToggle();
});
在此点击标题，显示p。
如果你继续使用CSS，你不需要动画，只需简单的过渡，你可以打开和关闭一个类来设置高度的动画。 W3 Schools有一个我认为可以帮助解决这个问题的演示。 http://www.w3schools.com/css3/css3_transitions.asp
这是一个使用jQuery和slideToggle的简单小提琴。 http://jsfiddle.net/markgtoce/HTyXm/
答案 1 :(得分：0)
我设法解决了这个问题。
问题的原因是包含'div'的'table'的CSS部分。
该表有一个类：
.WeFind_Table_Stretched{
height: 100%;
width: 100%;
}
高度：100％导致Chrome出现问题。 恕我直言，Chrome中的一个错误，但我没有得到谷歌的答复。
我删除了高度100％的部分，整个过程就像一个魅力。
埃雷兹