Pub*_*bby 8 html javascript css jquery
当css("display")在一个元素上调用jquery时,我得到了不可预知的结果; 有时它是flex,有时它是block.奇怪的是,这个错误仅在我使用jquery的show/时出现hide,并且错误发生在大约50%的时间.更奇怪的是,我甚至在跑步前都 看到了这些结果hide.
更新:它似乎也与这个google webfont css绑在一起.如果我删除字体问题就会消失.这一切都很奇怪.
这是我的代码的简化:
JS:
$(document).ready(function () {
console.log("1 display: " + $("#foo").css("display"));
$("#foo").hide();
console.log("2 display: " + $("#foo").css("display"));
$("#foo").show();
console.log("3 display: " + $("#foo").css("display"));
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/JavaScript"
src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/JavaScript" src="script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Forum' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="foo" class="centerer">
<p>Hello!</p>
</div>
</body>
</html>
CSS:
#foo {
background: white url("bg.jpg") center no-repeat;
background-size: 100vw auto;
}
.centerer {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
应该打印出正确的行为:
1 display: flex
2 display: none
3 display: flex
但是我在50%的时间里看到的是:
1 display: block
2 display: none
3 display: block
关于可能导致这种情况的任何想法？我想知道为什么.
在您的错误输出中，您的显示初始值是block。这不是 show 方法的错误。
您确定您的脚本在 CSS 计算后执行吗？
检查您的文档结构：
<!DOCTYPE html>
<html>
<head>
<!-- css include/import -->
</head>
<body>
<!-- html body -->
<!-- script include/import -->
</body>
</html>
| 归档时间： |
|
| 查看次数： |
3133 次 |
| 最近记录： |